我如何将Twitter-Bootstrap 3导航栏链接中心？

Question

如何将我设置的jsFiddle中的按钮居中,这样按钮的间距相等,并且在导航栏的中心和中心？

http://jsfiddle.net/3GQyq/3/

我尝试了不同的方法,比如

display:inline-block;margin:0 auto; text-align:center;

但我无法让它发挥作用.

如果您可以提供一些解释,而不是仅仅修复CSS,因为我想学习,所以我不必再继续回到这里.

编辑:

就像他们在这里居中一样^.

Answer 1

Bootstrap 3有一个nav-justified可以使用的类nav.无需额外的CSS:

<div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

演示:http://bootply.com/72519

根据评论,要使用navbar-nav类使用全角度居中链接,请使用flexbox ...

.navbar-center {
    width:100%;
    display: flex;
}
.navbar-center>li {
    flex:1 1 auto;
}

<div class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav navbar-center text-center">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </div>
</div>

https://www.codeply.com/go/6ZE3obnpuP

另请参阅
Bootstrap NavBar,其中包含左,中或右对齐项目Bootstrap中的中心导航栏