更改折叠式下拉菜单中文字的颜色

Question

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

当没有崩溃，我可以改变它：

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

但倒塌时，它不会改变。我错过了一些简单的东西吗

Answer 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 {} 

Answer 2

它看起来像bootstrap中的一个错误，它会用导航栏默认值覆盖折叠的导航颜色（请参阅bootstraps 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; 
    } 
    } 
} 

}