twitter-bootstrap 更改 .active tab bootstrap 的默认颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37533641/
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
change the default color of .active tab bootstrap
提问by Laxus
I want to change the color of the active tab on my navbar, I'm using bootstrap, here's my code:
我想更改导航栏上活动选项卡的颜色，我正在使用引导程序，这是我的代码：
<body>
<nav class = "navbar navbar-default navbar-fixed-top">
<div class = "container-fluid">
<div class = "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_navbar">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="collapse navbar-collapse" id="main_navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</nav> </body>
I tried to change it with this but didn't work(css file):
我试图用这个来改变它，但没有用（css文件）：
.active {
background-color: green !important;
}
also like this(javascript file):
也像这样（javascript文件）：
$(document).ready(function() {
$('.active').css("background-color", "green");
});
EDIT:
编辑：
I tried to explain more with code snipet but the css part did not work for me,
我试图用代码 snipet 解释更多，但 css 部分对我不起作用，
if I add this to my css file:
如果我将此添加到我的 css 文件中：
.navbar {
background-color: yellow;
}
The whole bar turns yellow with the exception of the active tab, that color is the one that I want to change.
除了活动选项卡外，整个条形变为黄色，该颜色是我想要更改的颜色。
回答by Jhecht
Bootstrap does something really silly to me and puts just about all of the actual styling on the <a>tag in the navigation, instead of the <li>like most people would do. You should change most styles on .active ainstead of just .active
Bootstrap 做了一些对我来说非常愚蠢的事情，并且<a>在导航中的标签上放置了几乎所有的实际样式，而不是<li>像大多数人那样做。您应该更改大多数样式，.active a而不仅仅是.active
.active a {
background-color: green !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_navbar">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="collapse navbar-collapse" id="main_navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Menu 1</a>
</li>
<li><a href="#">Menu 2</a>
</li>
<li><a href="#">Menu 3</a>
</li>
</ul>
</div>
</div>
</nav>回答by Brijesh Shukla
CSS is working if we do properly
如果我们做得好，CSS 就可以工作
<style>
a.active.nav-link{background-color: #17a2b8!important;}
</style>
Use this and you will be done. No need of Javascript
使用这个，你就完成了。不需要 Javascript
