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

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>

更新:

我基于Foundation示例创建了jsFiddle 如果浏览器大小很大,导航宽度会发生变化.但是我希望它被固定为主要内容.

Answer 1

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

如果您希望将导航设置为网格宽度,请将其包装在 div class ="contains-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>

希望这可以帮助 !

Answer 2

如果我正确理解了你想要的东西,你只需要将nav.top-bar元素包装在一个包含 class -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>