我为navbar的活动li元素添加了自定义CSS.但似乎是选择默认颜色.其他颜色,如导航栏BG和文本颜色似乎有适当的变化.
修改后的CSS规则如下：
.navbar-default {
background-color: #7b431a;
border-color: #d65c14;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus {
color: #8a0e0b;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > li > a:focus {
color: #8a0e0b;
}
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav > .active > a:focus {
color: #8a0e0b;
background-color: #d65c14;
}
.navbar-default .navbar-nav > .open > a,.navbar-default .navbar-nav > .open > a:hover,.navbar-default .navbar-nav > .open > a:focus {
color: #8a0e0b;
background-color: #d65c14;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #8a0e0b;
border-bottom-color: #8a0e0b;
}
.navbar-default .navbar-nav > .open > a .caret,.navbar-default .navbar-nav > .open > a:hover .caret,.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #8a0e0b;
border-bottom-color: #8a0e0b;
}
.navbar-default .navbar-toggle {
border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {
background-color: #d65c14;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
HTML是：
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Poducts</a></li>
<li class="active"><a href="#">Gallery</a></li>
</ul>
</nav>
输出导航栏如下：
解决方法
您需要将CSS添加到.active而不是.active a.
小提琴：http://jsfiddle.net/T5X6h/2/
像这样的东西：
.navbar-default .navbar-nav > .active{
color: #000;
background: #d65c14;
}
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:focus {
color: #000;
background: #d65c14;
}
