Верхняя панель навигации с полной шириной - Zurb Foundation

Я использую Zurb Foundation 4, и мне нужно, чтобы моя верхняя панель навигации была сосредоточена как .large-12.columns

Я попробовал следующее (но это не сработало)

<div class="row">
  <div class="large-12 columns">
      <nav class="top-bar">
        <ul class="title-area">
          ...
        </ul>

        <section class="top-bar-section">
          <ul class="left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>

          <ul class="right">
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </section>
    </nav>
  </div>
</div>

Обновление:

Я создал jsFiddle на основе Пример FoundationЕсли размер браузера большой, ширина навигации меняется. Но я хочу, чтобы он был сосредоточен как основной контент.

Ответ 1

Как говорится в документе Foundation 4: http://foundation.zurb.com/docs/components/top-bar.html

Если вы хотите, чтобы ваша навигация была установлена на ширину сетки, оберните ее div class= "содержать-в-сетку" .

Поэтому попробуйте использовать следующее:

<div class="contain-to-grid">
    <!-- Your nav bar -->
    <nav class="top-bar">
        <ul class="title-area">
            <!-- Title area here... -->
        </ul>

        <section class="top-bar-section">
            <ul class="left">
                <!-- Title area here... -->
            </ul>
            <ul class="right">
                <!-- Title area here... -->
            </ul>
        </section>
     </nav>
</div>

Надеюсь, это поможет!

Ответ 2

Если я правильно понимаю, что вам нужно, вам просто нужно обернуть элемент nav.top-bar в div с классом с привязкой к сетке.

<div class="row">
  <div class="contain-to-grid">
    <nav class="top-bar">
      <ul class="title-area">
        ...
      </ul>

      <section class="top-bar-section">
        <ul class="left">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>

        <ul class="right">
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </section>

    </nav>
  </div>
</div>

Ответ 3

Фундаментальная основа позволяет вложенным row первым <div class="row"> получить ширину страницы, но вы можете поместить в нее еще один <div class="row">, который будет меньше 12-столбцов-max-width.

Вы можете проверить документы, связанные с этой функцией здесь: http://foundation.zurb.com/docs/components/grid.html

Вы уверены, что строка, которую вы вставляете в вопрос, является первой в вашем HTML-коде? Если да, можете ли вы вставить ссылку для демонстрации своего кода, пожалуйста?

ИЗМЕНИТЬ

Если я понимаю его права, это довольно просто сделать с CSS:

.top-bar {
    max-width: 900px;
    margin:auto;
}

Ответ 4

<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
    <div class="row">
        <div class="large-12 columns">
            <ul class="menu" data-responsive-menu="accordion">
                <li><a href="#">1</a>
                </li>
                <li><a href="#">2</a>
                </li>
                <li><a href="#">3</a>
                </li>
                <li><a href="#">4</a>
                </li>
            </ul>
        </div>
    </div>
</nav>