twitter-bootstrap - 在引导程序 3.0 中更改活动下拉选项卡背景颜色

Question

我正在使用以下 css 更改导航栏下拉活动链接的背景颜色。

.navbar .nav > li.dropdown.open.active > a:hover, 
.navbar .nav > li.dropdown.open > a
{
   color: #fff;
   background-color: #b91773;
   border-color: #fff;
}

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

但是，如果我为导航选项卡扩展相同的 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;
}

这是输出

如何解决这个问题。

Answer 1

我认为这应该有效：

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

请注意，在选择两者之间没有空格，.nav.nav-tabs而不是第二个后跟第一个。

插入符号：

.nav.nav-tabs > li.dropdown.active.open > a span.caret {border-top-color: #fff;border-bottom-color: #fff;}

Answer 2

您应该找到下拉菜单的确切类别。它可能在您的导航中，也可能不在。我改变了引导主题的分页属性的活动类颜色，如下所示：

ul.dropdown-menu>li.active>a:hover{
    background: #419641 !important;
}

ul.dropdown-menu>li.active>a{
    background: #51AB51 !important;
}

Answer 3

什么对我有用：

.navbar-default .navbar-nav .dropdown.open a:focus {
    background-color: #6dbcc9;
}

Answer 4

如果你能做一个jsfiddle会容易得多。如果没有，那么这就是你可以做的。

1-确保添加的选项卡完全位于“.nav .nav-tabs > li.dropdown.open.active”类中并且路径正确。如果没有，它不会工作。

2-因此，请确定您是否添加了不相关的课程，或者您没有添加相关课程。