css - 如何使 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 中的 Center Navbar

Answer 2

添加样式

.nav{
    text-align: center;
}

这将使文本以 li 为中心。

检查小提琴

这些样式应该足够了。您试图将样式应用于错误的元素。

// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
    padding : 0 25px;
}

// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
    width:110px;
}