bootstrap 3 navbar active li不改变背景颜色 [英] bootstrap 3 navbar active li not changing background-color

问题描述

已为navbar的活动li元素添加了自定义CSS。但似乎是选择默认颜色。其他颜色，如导航条BG和文本颜色似乎有正确的更改。

Have added custom CSS for active li element of navbar . but it seems to be picking the default color. Other colors such as navbar BG and text color seems to have changes properly .

修改的css规则如下：

the modified css rules are as follows:

.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>

输出navbar如下：

the output navbar is as follows:

推荐答案

您需要将css添加到 .active 而不是 .active a

You need to add css to .active instead of .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:hover, 
 .navbar-default .navbar-nav > .active > a:focus {
      color: #000;
      background: #d65c14;
 }

这篇关于bootstrap 3 navbar active li不改变背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！