Question

我正在努力使用下拉列表活动背景颜色。 Image 如何更改此“wiadomości”背景颜色不是灰色？这是我的代码：

<li class="dzieci-link">
            <a href="#" class="linkor" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><font color="white">Wiadomości <span class="caret"></font></span></a>
            <ul class="dropdown-menu">
              <li><a href="">Twoje wiadomości</a></li>
              <li><a href="">Wyślij wiadomość</a></li>
            </ul>
 </li>

提前致谢！

Answer 1

以下内容适合您，假设您使用普通的BootStrap导航栏而没有太多改动：

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: red;
    color: #fff;
}

工作FIDDLE：https://jsfiddle.net/mcv0vj99/

当您单击下拉列表时，BootStrap会向父open添加li类，这可能会覆盖您之前的尝试。

注意 - 你应该把上面的内容放在你的BootStrap的CSS文件引用的CSS文件中，和/或附加一个父子，这样你就有了一个父/子选择器 - IE - .bodyclass .navbar-default .navbar-nav>.open>a {}

编辑 - 代码中的一个潜在错误是，您似乎已从父dropdown中忽略了“li”类。 IE：

<li class="dzieci-link">

应该是：

<li class="dropdown dzieci-link">

Answer 2

使用Bootstrap 4.1.3为我工作

CSS：

.navbar-light .navbar-nav .show>.nav-link {
color: #ff0000;}

用您自己的导航栏样式替换.navbar-light，例如，如果使用.navbar-default

Answer 3

HTML：

<li class="dzieci-link">
            <a href="#" class="linker mycustomcolor" data-toggle="dropdown" 
               role="button" aria-haspopup="true" aria-expanded="false">
               <font color="white">Wiadomości <span class="caret"></span></font></a>
            <ul class="dropdown-menu">
              <li><a href="">Twoje wiadomości</a></li>
              <li><a href="">Wyślij wiadomość</a></li>
            </ul>
 </li>

CSS：

.mycustomcolor {
 background-color:blue !important;
}

Answer 4

我遇到了同样的问题，这对我有用：

.dropdown-menu>.active>a{
background-color: #f5af01;
color: #000000;
}

Bootstrap - 如何在下拉导航栏中更改活动的li颜色

4 个答案: