Question

我正在尝试在boostrap的下拉菜单中更改活动链接的颜色和背景颜色。

我已经覆盖了bootstrap的@dropdownLinkColorActive和@dropdownLinkBackgroundActive变量但这没有任何效果。

“.navbar-inverse .nav .active＆gt; a”的css接管，如firebug中所示：

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
    background-color: #FFFFFF;
    color: #4D4D4F;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: #16A170;
    background-image: linear-gradient(to bottom, #17AA76, #149466);
    background-repeat: repeat-x;
    color: #FFFFFF;
    outline: 0 none;
    text-decoration: none;
}

为什么.navbar-inverse类会覆盖.dropdown-menu类？

Answer 1

可能导致下拉列表在导航栏中。

这个应该有效

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active     >     a:focus {
    background-color: #16A170 !important;
    background-image: linear-gradient(to bottom, #17AA76, #149466) !important;
    background-repeat: repeat-x !important;
    color: #FFFFFF;
    outline: 0 none;
    text-decoration: none;
}

Answer 2

假设您需要的背景颜色是#fff 写下这个：

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  text-decoration: none;
  color: #333333;
  background-color: #fff;
  background-image: -moz-linear-gradient(top, #fff, #fff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff));
  background-image: -webkit-linear-gradient(top, #fff, #fff);
  background-image: -o-linear-gradient(top, #fff, #fff);
  background-image: linear-gradient(to bottom, #fff, #fff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=0);
}

Bootstrap：更改下拉菜单活动链接颜色

2 个答案: