css – 全宽中心导航顶栏 – Zurb基金会

我正在使用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>

更新：

我根据Foundation Example创建了jsFiddle
如果浏览器大小较大，导航宽度会更改。但是我希望它以固定为主要内容。

解决方法

正如基金会4文件所说：
http://foundation.zurb.com/docs/components/top-bar.html

If you want your navigation to be set to your grid width,wrap it in
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>

希望这可以帮助 ！