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

Question

我试图navbar在Bootstrap 3中证明(使导航栏内容延伸).我已经添加margin: 0 auto; max-width: 1000px;到nav*类中,并且还尝试将container元素作为父元素添加到ul.作为最后一次检查,我通过添加到课程中完成了本答案中建议navbar-justified的内容navbar,但是这导致一切都在左边拼凑而不是整个导航栏的合理性.

做一个nav nav-justified ul确实成为ul中心,但它不保留navbar-nav类的样式,因为它不是它的一部分ul,并且当屏幕小于768px时它看起来不太好.

我如何证明Bootstrap 3的合理性navbar？

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

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

而这里是一个工作的jsfiddle.您可能需要拉伸result框的大小才能正确显示.如果你对实际列表居中感兴趣而没有导航拉伸到全宽,请参阅David Taiaroa的jsFiddle.

Answer 1

您可以使用以下方法证明导航栏内容的合理性:

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

现场观看:http://jsfiddle.net/panchroma/2fntE/

祝好运!

Answer 2

要将bootstrap 3 navbar-nav justify菜单设置为100%宽度,您可以使用以下代码:

@media (min-width: 768px){
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
    }
    .navbar-nav>li {
        display: table-cell;
        float: none;
        text-align: center;
    }
} 

Answer 3

事实证明,float: left默认情况下所有navbar-nav>li元素都有一个属性,这就是为什么它们都向左碾压的原因.一旦我添加了下面的代码,它就会使navbar两者都居中并且不会被碾压.

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

希望这可以帮助那些想要集中精力的人navbar.