一个全宽度居中的导航栏 - Zurb Foundation

Question

我正在使用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示例。如果浏览器窗口大，导航栏的宽度会改变。但是我希望导航栏能够像主要内容一样居中固定。

- dpaluy

---

请创建一个“Fiddle”来使理解更简单。 - The Mechanic

Answer 1

根据 Foundation 4 文档所述： http://foundation.zurb.com/docs/components/top-bar.html

如果您想将导航设置为网格宽度，请将其包装在div class="contain-to-grid"中。

因此，请尝试使用以下内容：

<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>

希望这可以帮到您！

- Guillaume

---

这个可行，而且基础文档页面应该包含这些信息，我个人认为。 - Edwin Yip

Answer 2

如果我理解正确，您只需要将 nav.top-bar 元素包裹在一个类名为 contain-to-grid 的 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>

- Carlos Garcia

---

这对我有用。看起来正是我想要做的事情，以使该栏工作，但在复制并粘贴此代码之前，我无法做到。这个有效。 - FernandoZ

Answer 3

基础框架允许嵌套row。第一个<div class="row">获取页面的宽度，但您可以将另一个<div class="row">放入其中，其最大宽度为12列。

您可以在此处检查与此功能相关的文档：http://foundation.zurb.com/docs/components/grid.html 您确定您在问题中粘贴的行是HTML代码中的第一个吗？如果是，请提供一个演示代码的链接。

编辑

如果我理解正确，可以使用CSS轻松实现：

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

- Xavier

Answer 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>

- user1808292