全宽居中导航顶栏 - Zurb Foundation

Posted 2023-03-06

【中文标题】全宽居中导航顶栏 - Zurb Foundation

【英文标题】：A Full-Width Centered Navigation Top Bar - Zurb Foundation

【发布时间】：2013-05-18 17:11:47

【问题描述】：

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

【问题讨论】：

请创建一个 fiddle 以便于理解

【参考方案1】：

基础框架允许嵌套的row第一个<div class="row">获取页面的宽度，但您可以将另一个<div class="row">放入其中，它的宽度更小，为12-columns-max-width。

您可以在此处查看与此功能相关的文档：http://foundation.zurb.com/docs/components/grid.html

您确定您在问题中粘贴的行是 HTML 代码中的第一行吗？如果是，您可以粘贴一个链接以获取您的代码演示吗？

编辑

如果我理解它的权利，用 CSS 做起来很简单：

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

【参考方案2】：

如果我正确理解您想要什么，您只需将您的 nav.top-bar 元素包装在 div 中，并使用类 contain-to-grid 。

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

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

希望这会有所帮助！

【讨论】：

这行得通，基金会文档页面应该包含此信息，恕我直言。

【参考方案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>