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

I am using Zurb Foundation 4 and I need my top bar navigation to be centered as .large-12.columns

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

I tried the following (but it doesn't work)

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

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

Update:

更新：

I created jsFiddle based on Foundation Example If the browser size is big, the navigation width changes. But I want it to be centered fixed as main content.

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

4 个解决方案

#1

As the Foundation 4 docs saying : http://foundation.zurb.com/docs/components/top-bar.html

正如基金会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 =“contains-to-grid”中。

So try using the following :

所以尝试使用以下内容：

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

Hope this helps !

希望这可以帮助 ！

#2

If I understand correctly what you want, you just need to wrap your nav.top-bar element in a div with class contain-to-grid.

如果我正确理解了你想要的东西，你只需要将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>

#3

The foundation framework allows nested rowthe first <div class="row"> get the width of the page but you can put another <div class="row">into it which is going a smaller 12-columns-max-width.

基础框架允许嵌套行第一个

获取页面的宽度，但是你可以将另一个

放入其中，这将是一个较小的12列最大宽度。

You can check the docs related to this feature here : http://foundation.zurb.com/docs/components/grid.html

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

Are you sure the row you paste in the question is the first one in your HTML code ? If it is, can you paste a link for a demo of your code please?

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

EDIT

If i understand it rights, it pretty simple to do with CSS :

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

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

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