在 bootstrap 3.0 中更改活动下拉选项卡背景颜色 [英] Changing active dropdown tab background color in bootstrap 3.0

问题描述

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

I am using the following css to change background color of navbar dropdown active link.

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

但是如果我为导航标签扩展相同的 css，它就不起作用.这是css类

But if i extend same css for nav-tabs it doesn work. here is css class

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

这里是输出

如何解决这个问题.

推荐答案

我认为这应该可行:

.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 之间没有空格导致选择同时拥有两个而不是第二个后跟第一个.

Note no space between .nav.nav-tabs cause to select for having both and not the second followed by the first.

插入符号:

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

这篇关于在 bootstrap 3.0 中更改活动下拉选项卡背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！