[英]Modify twitter bootstrap navbar
我一直试图修改twitter bootstrap导航栏,此刻所有链接都对齐到左边,当我真正想要的是将它们放在中心位置时。
在另一篇文章中我读到你使用它
.tabs, .pills {
margin: 0 auto;
padding: 0;
width: 100px;
}
但这对我不起作用
我需要在css中更改以实现此目的,我理解我将修改后的CSS放在引导程序中并覆盖。
任何帮助赞赏
这是我的标记
布局/应用
<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
的菜单项来居中导航菜单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;
}
虽然我建议您创建自己的类来定位您希望居中的导航栏菜单,但这样您就不会打扰引导程序默认值,并且可能会混淆页面中可能包含的其他导航部分。 你可以这样做:
注意导航栏容器中的.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;
}
我知道这是一个很老的帖子,但我也在google搜索过几次这篇帖子。 我想实际设置记录直接将导航栏置于twitter bootstrap中,因为当前接受的方法没有错,但不需要,因为twitter bootstrap支持这一点。
实际上有一种更好的方法可以手动修改它。 这将通过使用twitter bootstrap中已有的内容来减少代码。
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">RIZEN</a>
<ul class="nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
</div>
</div>
分解
第一行非常简单,因为我们正在创建导航栏,将其设置为视口上的固定位置到顶部,然后通过反转颜色主题将白色交换为黑色。
接下来我们将分配navbar-inner,或多或少说,如果可能的话,设置最小高度,这是实际颜色样式的来源,而不是上面的行。
这是重要的一行,因为我们正在删除导航栏的流体布局并且仅使用容器。 这设置了一个固定的边距,中心将内部内容与屏幕对齐。 这是通过自动边距和设置宽度来完成的。
通过不添加额外的代码并使用twitter引导程序正确使用脚手架并且没有额外的代码膨胀,此方法将执行您想要的实际保存kb的头请求。 我在自己的项目中使用了这种方法,并继续在我当前的项目中使用它。 修改TBS(Twitter引导程序)的危险在于您丢失了代码一致性,如果将来您想要更改内容,则必须记下您已更改的内容,否则事情可能无法按预期工作。
希望这可以帮助。 此外,如果你想要一个工作的例子,只需查看twitter bootstrap的主页即可。
啊,而且,如果您希望两侧的空间(在“项目名称”之前和“下拉”之后)是对称的,请添加以下内容:
.navbar .nav, .navbar .nav > ul
{
float: right
}
此外,似乎使用以下(从Bootstrap v2.0.4开始)不会使导航栏居中:
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
<div class="container-fluid">
.
.
.
</div>
</div>
</div>
你需要改为
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
<div class="container">
.
.
.
</div>
</div>
</div>
(摘自Andres llich提供的样本;只是他错过了更改)
现在它对我有用......
上面的定心css仅适用于未折叠的导航栏。
但是,当导航栏折叠时,它并不理想。 默认情况下,每个折叠的导航栏项都在其自己的行上,如下拉菜单。 但是上面的css试图将所有折叠的项目推到同一行上,这不太理想。
我在媒体查询中使用了这个包含居中css的小修复程序,因此它仅在非折叠导航栏上触发:
@media (min-width: 768px) {
.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;
}
}
(使用bootstrap 3.1.1测试)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.