twitter-bootstrap 在 bootstrap 3.0 中更改活动下拉选项卡背景颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19011582/
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
Changing active dropdown tab background color in bootstrap 3.0
提问by irfanmcsd
I am using the following css to change background color of navbar dropdown active link.
我正在使用以下 css 更改导航栏下拉活动链接的背景颜色。
.navbar .nav > li.dropdown.open.active > a:hover,
.navbar .nav > li.dropdown.open > a
{
color: #fff;
background-color: #b91773;
border-color: #fff;
}
It properly change background color of active dropdown link as shown in screenshot.

它正确更改活动下拉链接的背景颜色,如屏幕截图所示。

But if i extend same css for nav-tabs it doesn work. here is css class
但是如果我为导航标签扩展相同的 css,它就不起作用。这是css类
.nav .nav-tabs > li.dropdown.open.active > a,
.nav .nav-tabs > li.dropdown.open.active > a:hover
{
color: #fff;
background-color: #b91773;
border-color: #fff;
}
Here is output

这是输出

How to fix this issue.
如何解决这个问题。
回答by Bass Jobsen
I think this should work:
我认为这应该有效:
.nav.nav-tabs > li.dropdown.active.open > a,
.nav.nav-tabs > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-tabs > li.dropdown.open > a,
.nav.nav-tabs > li.dropdown.open > ul.dropdown-menu a:hover
{
color: #fff;
background-color: #b91773;
border-color: #fff;
}
Note no space between .nav.nav-tabscause to select for having both and not the second followed by the first.
请注意.nav.nav-tabs,选择原因之间没有空格,而不是第二个后跟第一个。
caret:
插入符号:
.nav.nav-tabs > li.dropdown.active.open > a span.caret {border-top-color: #fff;border-bottom-color: #fff;}
回答by crx4
You should fint the exact class of the dropdown menu. It could be in your nav or not. I changed the active class color of the pagination property of the Bootstrap Theme like this:
您应该找到下拉菜单的确切类别。它可能在您的导航中,也可能不在。我像这样更改了 Bootstrap 主题的分页属性的活动类颜色:
ul.dropdown-menu>li.active>a:hover{
background: #419641 !important;
}
ul.dropdown-menu>li.active>a{
background: #51AB51 !important;
}
回答by Engr Atiq
It would be a lot easier if you could make a jsfiddle. if not then here is what you can do.
如果你可以制作一个 jsfiddle 会容易得多。如果没有,那么这就是你可以做的。
1- make sure that the tab Added lies exactly in ".nav .nav-tabs > li.dropdown.open.active" classes and the path is correct. IF not, it wont work.
1- 确保添加的选项卡完全位于“.nav .nav-tabs > li.dropdown.open.active”类中并且路径正确。如果没有,它将无法正常工作。
2- So, find out if you have added a class that is not relevant or you have not added a relevant class.
2- 因此,找出您是否添加了一个不相关的类或您没有添加一个相关的类。
回答by Rokit
What worked for me:
什么对我有用:
.navbar-default .navbar-nav .dropdown.open a:focus {
background-color: #6dbcc9;
}

