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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:35:14  来源:igfitidea点击:

Changing active dropdown tab background color in bootstrap 3.0

twitter-bootstraptwitter-bootstrap-3

提问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. enter image description here

它正确更改活动下拉链接的背景颜色,如屏幕截图所示。 在此处输入图片说明

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 enter image description here

这是输出 在此处输入图片说明

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;
}