Twitter Bootstrap 2.0 中的中心导航栏 [英] Center Navbar in Twitter Bootstrap 2.0
本文介绍了Twitter Bootstrap 2.0 中的中心导航栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
假设我们有以下使用 Twitter Bootstrap 2.0 的导航栏标记.
将 .nav
置于 navbar-inner
中的最佳方法是什么?
我只是想添加我自己的 CSS 样式:
@media(最小宽度:980px){.pull-center {文本对齐:居中;}.pull-center >.nav {浮动:无;显示:内联块;*显示:内联;*缩放:1;高度:32px;}}
解决方案
将导航栏中容器的宽度从 auto
覆盖为 960px
.
.navbar-inner .container {width:960px;}
Suppose we have the following markup for navigation bar using 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>
What is the best way to center .nav
inside navbar-inner
?
I only came up with adding my own CSS styles:
@media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
解决方案
Override the width of the container within the navbar from auto
to 960px
.
.navbar-inner .container {width:960px;}
这篇关于Twitter Bootstrap 2.0 中的中心导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文