Twitter Bootstrap 2.0中的中心导航栏
提问于 2012-04-12 17:37:20
假设我们有以下使用Twitter Bootstrap 2.0的导航栏标记。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner pull-center">
<ul class="nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>在navbar-inner中居中.nav的最佳方式是什么
我只是想添加我自己的CSS样式：
@media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
回答 5
Stack Overflow用户
发布于 2012-06-14 00:56:28
将导航栏中容器的宽度从auto覆盖到960px。
.navbar-inner .container {width:960px;}Stack Overflow用户
发布于 2013-06-01 13:14:46
为了将它与动态宽度对齐，我使用了以下方法：
HTML：
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
....
</ul>
</div>
</div>CSS：
.navbar .navbar-inner {
text-align: center;
}
.navbar .navbar-inner .nav {
float: none;
display:inline-block;
}我没有测试它，但我猜只有display:inline-block;可能会有问题，除了IE7和更低版本的浏览器外，所有浏览器都支持它。
Stack Overflow用户
发布于 2013-04-24 17:06:22
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10128812
复制相关文章
腾讯云开发者
