【问题标题】：Change color of text in collapsed dropdown更改折叠下拉列表中文本的颜色
【发布时间】：2013-12-15 22:10:51
【问题描述】：

在哪里可以更改折叠下拉菜单中文本的颜色？出于某种原因，我的下拉菜单在折叠时会出现不同的背景和文本颜色。

当不折叠时，我可以更改它：

.navbar-inverse .navbar-nav > li > a {
  color: #000;
}

但是当折叠时它不会改变。我错过了一些简单的东西吗？

【问题讨论】：

标签： twitter-bootstrap drop-down-menu twitter-bootstrap-3 navbar

【解决方案1】：

当下拉菜单打开时，它会将open 类添加到父下拉菜单元素中。您可以使用它来选择性地设置关闭/打开下拉菜单的样式。

以下面的HTML为例：

<div class="dropdown">

    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
        Action <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>

</div>

我们可以在下拉列表中添加一个颜色属性，然后在打开时使用以下 CSS 更改颜色属性： *(如果按钮被设置样式，您可能必须使用 !important )

.dropdown > button {
    color: yellow;
}
.dropdown.open > button {
    color: orange;
}

Working Demo in JsFiddle

看起来像这样：

如果您只想在关闭时更改样式，可以使用 :not 伪类选择器，如下所示：

.dropdown:not(.open) > button {}

【讨论】：

【解决方案2】：

它看起来像引导程序中的一个错误，它用导航栏默认颜色覆盖折叠的导航颜色（参见引导程序 navbar.less 第 468 行）。

为了修复它，在将引导程序导入项目后添加以下更少的代码：

@media (max-width: @grid-float-breakpoint-max) {

 .navbar-default .navbar-nav .open .dropdown-menu {
   > li > a {
     color: @dropdown-link-color;
     &:hover,
     &:focus {
       color: @dropdown-link-hover-color;
       background-color: @dropdown-link-hover-bg;
     }
   }
   > .active > a {
     &,
     &:hover,
     &:focus {
       color: @dropdown-link-active-color;
       background-color: @dropdown-link-active-bg;
     }
   }
 }

}

【讨论】：