twitter-bootstrap - 中心无序列表导航栏 - Bootstrap 3

Question

所以，我试图将我的导航栏列表项居中。由于此任务没有实用函数，因此我设计了以下代码，将无序列表放置在一行中的列中。但是即使在我尝试使用旧的'text-align:center'居中后，列表仍然向左对齐

<div class="navbar navbar-fixed-top ">
    <!--<a class="navbar-brand" href="#">Title</a> -->
    <div class= "row">
        <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

我采取的步骤:

删除 float: left来自列表和列表元素

使用display: inline代替列表元素

将链接设置为 display: inline-block所以他们保持他们的 block 尺寸

只需添加 text-align: center到导航栏以使所有内容居中

包含媒体查询，因此移动设备上的垂直列表不受影响

生成的 CSS 添加了 .navbar-centered风格:

@media (min-width: 768px) {
    .navbar-centered .navbar-nav {
        float: none;
        text-align: center;
    }
    .navbar-centered .navbar-nav > li {
        float: none;
    }
    .navbar-centered .nav > li {
        display: inline;
    }
    .navbar-centered .nav > li > a {
        display: inline-block;
    }
}

通过申请 .navbar-centered 使用导航栏样式:

<div class="navbar navbar-default navbar-centered" role="navigation">
    ...
</div>