所以,我试图集中我的导航栏列表项。由于此任务没有实用程序功能,因此我设计了以下代码,将无序列表放在行中的列中。但是,即使在我尝试使用旧的“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>
答案 0 :(得分:23)
我采取的步骤:
float: left
display: inline
代替列表元素display: inline-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>
答案 1 :(得分:3)
我能够自己解决这个问题。不确定这是否是最佳解决方案:
<div class="navbar navbar-fixed-top">
<div style="border:1px solid black" class="container">
<div class="inner-nav">
<!--<a href="#" class="navbar-brand">Title</a> -->
<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>
然后我将以下样式添加到bootstrap.css:
/* ADDED for centering navbar items */
.navbar .inner-nav ul {
position:relative;left:50%;float:left;margin-right:0;margin-left:0;
}
/* ADDED for centering navbar items */
.navbar .inner-nav li {
position:relative;right:50%;float:left;margin:0;list-style:none
}
答案 2 :(得分:2)
这是我昨天做的代码,与 Bootstrap 3 RC1 配合使用。希望这会对你有所帮助。
<nav class="navbar navbar-fixed-top">
<div class="container">
<a href="#" class="navbar-brand">Title</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#" >Home</a></li>
<li><a href="#" >Services</a></li>
</ul>
</div>
</nav>
如果问题仍然存在,请告诉我。
修改:删除不必要的标记