Question

我正在使用 Zurb Foundation 4 ，我需要将我的顶栏导航设为 .large-12.columns

enter image description here

我尝试了以下（但它不起作用）

<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 Example 如果浏览器大小很大，则导航宽度会发生变化。但我希望将它作为主要内容固定在中心。

Answer 1

正如基金会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>

希望这有帮助！

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

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

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>

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

4 个答案:

修改