Bootstrap 3 navbar active li 不改变背景颜色答案

【问题标题】：Bootstrap 3 navbar active li not changing background-colorBootstrap 3 navbar active li 不改变背景颜色
【发布时间】：2013-12-22 18:25:07
【问题描述】：

我为导航栏的活动 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 twitter-bootstrap

【解决方案1】：

在我自己在bootstrap.min.css 之后加载的bootstrap.css 中，使用!important 切换背景图像对我有用：

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

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

【讨论】：

【解决方案2】：

在 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 元素，这应该可以工作。

【讨论】：

【解决方案3】：

嗯，我也遇到过类似的挑战。使用 Firefox 中的检查元素工具，我能够跟踪单击时用于设置链接样式的标记和 CSS。单击时，列表项 (li) 被赋予一个 .open 类，它是该类中的锚标记，格式为灰色背景。

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

.nav .open > a
{
    background:#759ad6;
    // Put in styling
}

【讨论】：

【解决方案4】：

您的代码中是否包含“bootstrap-theme.css”文件？

在“bootstrap-theme.min.css”文件中，“navbar”存在关于“.active”的背景图像（查看此屏幕截图：http://i.imgur.com/1etLIyY.png）。

它会重新声明你的样式代码，然后它会影响你的代码。

所以在你删除或重新声明它们（背景图片）之后，你可以使用你的背景颜色样式来描述“.active”标签。

【讨论】：

【解决方案5】：

您需要将 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;
}

【讨论】：

感谢您的回答。问题仍然存在。 :) .navbar-default .navbar-nav > .active { 颜色：#8a0e0b;背景：#d65c14； }
你能创建一个小提琴吗？..似乎对我有用。
那么你想覆盖灰色吗？
这是你想要的吗：jsfiddle.net/T5X6h/1我不确定你想要什么颜色。
颜色可以通过十六进制值进行修改。但问题是它没有拾取提供的颜色（无论是任何颜色）

【解决方案6】：

在我的情况下，只需从 nav-bar 项目中删除 background-image 即可解决问题

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


    background-image: none;
}

【讨论】：