更改摺疊式下拉菜單中文字的顏色

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

}