我正在使用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
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>
希望这可以帮助 ！
