CSS Bootstrap 3 导航栏活动 li 不改变背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20732584/
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
Bootstrap 3 navbar active li not changing background-color
提问by Abdul Ali
I have added custom CSS for the 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.
我为导航栏的活动 li 元素添加了自定义 CSS。但它似乎正在选择默认颜色。其他颜色如导航栏 BG 和文本颜色似乎有适当的变化。
The modified CSS rules are as follows:
修改后的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;
}
The HTML is:
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>
The output navbar is as follows:
输出导航栏如下：
回答by Ani
You need to add CSS to .activeinstead of .active a.
您需要将 CSS 添加到.active而不是.active a.
Fiddle: http://jsfiddle.net/T5X6h/2/
小提琴：http: //jsfiddle.net/T5X6h/2/
Something like this:
像这样的东西：
.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;
}
回答by cabanni
In my own bootstrap.cssthat I load after the bootstrap.min.cssonly that, switch of the background image with !importantworks for me:
在我自己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;
}
回答by moeabdol
In Bootstrap 3.3.x make sure you use the scrollspy JavaScript capability to track active elements. It's easy to include it in your HTML. Just do the following:
在 Bootstrap 3.3.x 中，请确保使用 scrollspy JavaScript 功能来跟踪活动元素。将它包含在您的 HTML 中很容易。只需执行以下操作：
<body data-spy="scroll" data-target="Id or class of the element you want to track">
In most cases I usually track active elements on my navbar, so I do the following:
在大多数情况下，我通常会在导航栏上跟踪活动元素，因此我会执行以下操作：
<body data-spy="scroll" data-target=".navbar-fixed-top" >
Now in your CSS you can target .navbar-fixed-top .active a:
现在在你的 CSS 中你可以定位.navbar-fixed-top .active a：
.navbar-fixed-top .active a {
// Put in some styling
}
This should work if you are tracking active li elements in your top fixed navigation bar.
如果您在顶部固定导航栏中跟踪活动 li 元素，这应该有效。
回答by Ogunnaike Damilare
Well, I had a similar challenge. Using the inspect element tool in Firefox, I was able to trace the markup and the CSS used to style the link when clicked. On click, the list item (li) is given a class of .open and it's the anchor tag in the class that is formatted with the grey color background.
嗯，我也遇到过类似的挑战。使用 Firefox 中的检查元素工具，我能够在单击时跟踪用于设置链接样式的标记和 CSS。单击时，列表项 (li) 被赋予一个 .open 类，它是该类中的锚标记，其格式为灰色背景。
To fix this, just add this to your stylesheet.
要解决此问题，只需将其添加到您的样式表中即可。
.nav .open > a
{
background:#759ad6;
// Put in styling
}
回答by JinHyup Kim
Did you include "bootstrap-theme.css" files on your code?
您是否在代码中包含了“bootstrap-theme.css”文件？
In "bootstrap-theme.min.css" files, background-image about ".active" is existed for "navbar" (check this screenshot: http://i.imgur.com/1etLIyY.png).
在“bootstrap-theme.min.css”文件中，“navbar”存在关于“.active”的背景图像（查看此截图：http://i.imgur.com/1etLIyY.png ）。
It will re-declare your style code, and then it will be effected on your code.
它将重新声明您的样式代码，然后它会影响您的代码。
So after you delete or re-declare them (background-image), you can use your background color style about the ".active" tag.
因此，在删除或重新声明它们（背景图像）后，您可以使用有关“.active”标签的背景颜色样式。
回答by Asad
in my case just removing background-imagefrom nav-baritem solved the problem
在我的情况下，只需background-image从nav-bar项目中删除即可解决问题
.navbar-default .navbar-nav > .active > a:focus {
.
.
.
background-image: none;
}
