twitter-bootstrap 导航栏中的样式导航药丸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15067694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
style nav-pills in navbar
提问by user1614384
I am not sure if correct but using bootstrap nav-pills in a navbar does not work as the nav takes priority in the bootstrap.css. If correct then are we not suppose to use these nav styles in the navbar ?
我不确定是否正确，但在导航栏中使用引导导航药丸不起作用，因为导航在 bootstrap.css 中优先。如果正确，那么我们不应该在导航栏中使用这些导航样式吗？
Line 4094 .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus { color: #ffffff; background-color: #0088cc; }
第 4094 行 .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus { color: #ffffff; background-color: #0088cc; }
line 4623
第 4623 行
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
采纳答案by Shail
You can use it in following way :
Jsfiddle with navbar and navpills
您可以通过以下方式使用它：
Jsfiddle with navbar and navpills
.navbar .nav-pills >li >a {
color: #005580;
}
.navbar .nav-pills > li > a:hover {
background-color: #0088cc;
}
.navbar .nav-pills .active > a {
background-color:#ccc;
color:#0088cc;
}
<div class="navbar">
<div class="navbar-inner">
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
<i class="icon-bar"></i>
</a>
<a class="brand" href="">New Icon Menu</a>
<div class="nav-collapse">
<ul class="nav nav-pills pull-right">
<li><a href=""><i class="icon-home icon-2x"></i> Home<br></a>
</li>
<li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a>
</li>
<li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a>
</li>
<li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
