1

ブーストラップのドロップダウン メニューでアクティブなリンクの色と背景色を変更しようとしています。

ブートストラップの @dropdownLinkColorActive および @dropdownLinkBackgroundActive 変数をオーバーライドしましたが、効果はありません。

firebug に見られるように、「.navbar-inverse .nav .active > a」の css が引き継ぎます。

.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 クラスをオーバーライドするのはなぜですか?

4

2 に答える 2

4

おそらく、ドロップダウンがナビゲーションバーにあることが原因です。

これはうまくいくはずです

.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;
}
于 2013-06-26T14:44:26.880 に答える