Question

我为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>

输出导航栏如下：

Navbar image

Answer 1

您需要将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:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #000;
    background: #d65c14;
}

Answer 2

我自己bootstrap.css仅在bootstrap.min.css之后加载，用!important切换背景图片对我有效：

.navbar-nav li a:hover, .navbar-nav > .active > a {
  color: #fff !important;

  background-color:#f4511e !important;
  background-image: none !important;
}

Answer 3

在Bootstrap 3.3.x中，请确保使用scrollspy JavaScript功能来跟踪活动元素。将它包含在HTML中很容易。只需执行以下操作：

<body data-spy="scroll" data-target="Id or class of the element you want to track">

在大多数情况下，我通常会在导航栏上跟踪活动元素，因此我会执行以下操作：

<body data-spy="scroll" data-target=".navbar-fixed-top" >

现在，您可以在CSS中定位.navbar-fixed-top .active a：

.navbar-fixed-top .active a { 
    // Put in some styling 
}

如果您在顶部固定导航栏中跟踪活动的li元素，这应该有效。

Answer 4

好吧，我遇到了类似的挑战。使用Firefox中的inspect元素工具，我能够跟踪标记和用于在单击时设置链接样式的CSS。单击时，列表项（li）被赋予一个.open类，它是使用灰色背景格式化的类中的锚标记。

要解决此问题，只需将其添加到样式表即可。

lspci | grep -i vga

Answer 5

您是否包含＆＃34; bootstrap-theme.css＆＃34;您的代码上的文件？

＆＃34; bootstrap-theme.min.css＆＃34;文件，背景图片关于＆＃34; .active＆＃34;存在于＆＃34; navbar＆＃34; （查看此屏幕截图：http://i.imgur.com/1etLIyY.png）。

它将重新声明您的样式代码，然后它将对您的代码产生影响。

因此，在删除或重新声明它们（背景图像）后，您可以使用关于＆＃34; .active＆＃34;的背景颜色样式。标签

Answer 6

在我的情况下，只是从background-image项中移除nav-bar解决了问题

.navbar-default .navbar-nav > .active > a:focus {
    .
    .
    .


    background-image: none;
}

Bootstrap 3导航栏活动li不改变背景颜色

6 个答案: