twitter-bootstrap - 如何在 Bootstrap 3 中证明 navbar-nav 的合理性

Question

我试图证明 navbar 的合理性(使导航栏内容拉伸(stretch))在 Bootstrap 3 中。我添加了 margin: 0 auto; max-width: 1000px; 到 nav* 类，并且还尝试将 container 元素添加为 ul 的父元素>。作为最后一次检查，我执行了建议的操作 in this answer通过将 navbar-justified 添加到 navbar 类，但这会导致所有内容都在左侧挤在一起，而不会对齐整个导航栏。

执行 nav nav-justified ul 确实使 ul 居中，但它不保留 的样式navbar-nav 类，因为它不是 ul 的一部分，并且当屏幕小于 768px 时它看起来不太好。

如何证明 Bootstrap 3 导航栏 的合理性？

编辑:对于那些对更完整的答案感兴趣的人，这里是我在生产中使用的一些代码:

// Stylesheet
.navbar-nav>li {
  float: none;
}

// Navbar
<nav class="navbar navbar-default">
  <ul class="nav nav-justified navbar-nav">
    <li><a href="/">Home</a></li>
    <li><a href="group.html">Group</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="positions.html">Positions</a></li>
  </ul>
</nav>

和here is a working jsFiddle 。您可能需要拉伸(stretch)结果框的大小才能正确显示。如果您有兴趣将实际列表居中而不将导航拉伸(stretch)到全宽，请参阅 David Taiaroa's jsFiddle 。

Answer 1

您可以使用以下方法调整导航栏内容:

@media (min-width: 768px){
  .navbar-nav{
     margin: 0 auto;
     display: table;
     table-layout: fixed;
     float: none;
  }
}  

观看直播:http://jsfiddle.net/panchroma/2fntE/