所以,我试图把我的导航栏列表项列在中心.由于此任务没有效用函数,因此我设计了将无序列表放入行中的列的以下代码.但是,即使我尝试以旧的“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>
解决方法
我采取的步骤：
>删除float：从列表和列表元素中留下
>使用display：inline代替列表元素
>设置要显示的链接：内嵌块,以便它们保持块的大小
>只需添加文本对齐：中心到导航栏,使所有内容居中
>包装在媒体查询中,因此移动设备上的垂直列表不受影响
结果CSS添加.navbar为中心的样式：
@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为中心的样式到导航栏：
<div class="navbar navbar-default navbar-centered" role="navigation">
...
</div>