我一直在尝试修改 Twitter Bootstrap 导航栏,目前所有链接都向左对齐,而我真正想要的是让它们居中。
在另一篇文章中我读到你使用这个
.tabs, .pills {
margin: 0 auto;
padding: 0;
width: 100px;
}
但这对我不起作用
我需要在 css 中更改什么才能实现这一点,我知道我将修改后的 css 放在 Bootstrap 中并覆盖。
感谢任何帮助
这是我的标记
布局/应用
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand">Newbridges</a>
<% if user_signed_in? %>
<div class="nav-collapse">
<ul class="nav ">
<%= render "shared/navbarlogin" %>
</div>
<% else%>
<div class="nav-collapse">
<ul class="nav">
<%= render "shared/navbar" %>
</div>
<% end %>
这个我也试过
.nav > li {
float: none;
display: inline-block;
*display: inline;
/* ie7 fix */
zoom: 1;
/* hasLayout ie7 trigger */
}
.nav {
text-align: center;
}
最佳答案
您可以通过将菜单项设置为 display:inline-block
而不是 float:left
来居中导航菜单,如下所示:
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner {
text-align:center;
}
虽然我建议您创建自己的类来定位您希望居中的导航栏菜单,这样您就不会打扰 Bootstrap 默认值,也不会弄乱您页面中可能包含的其他导航部分。你可以这样做:
注意导航栏容器中的 .center 类
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
然后您可以像这样定位 .center
类:
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
演示:http://jsfiddle.net/C7LWm/show/
编辑:忘记将子菜单项重新对齐到左侧,这是解决方法:
CSS
.center .dropdown-menu {
text-align: left;
}
关于css - 修改 twitter bootstrap navbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10568103/