ブートストラップ3 navbarアクティブli背景色が変更されない

navbarのアクティブなli要素にカスタムCSSを追加しました。しかし、それはデフォルトの色を選んでいるようです。他の色、例えばnavbar BGやテキストの色が正しく変化しているようです。ブートストラップ3 navbarアクティブli背景色が変更されない

次のように変更されたCSSルールは以下のとおりです。

.navbar-default { 
    background-color: #7b431a; 
    border-color: #d65c14; 
} 
.navbar-default .navbar-brand { 
    color: #ffffff; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #8a0e0b; 
} 
.navbar-default .navbar-nav > li > a { 
    color: #ffffff; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #8a0e0b; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #8a0e0b; 
    background-color: #d65c14; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
    color: #8a0e0b; 
    background-color: #d65c14; 
} 
.navbar-default .navbar-nav > .dropdown > a .caret { 
    border-top-color: #ffffff; 
    border-bottom-color: #ffffff; 
} 
.navbar-default .navbar-nav > .dropdown > a:hover .caret, 
.navbar-default .navbar-nav > .dropdown > a:focus .caret { 
    border-top-color: #8a0e0b; 
    border-bottom-color: #8a0e0b; 
} 
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret { 
    border-top-color: #8a0e0b; 
    border-bottom-color: #8a0e0b; 
} 
.navbar-default .navbar-toggle { 
    border-color: #d65c14; 
} 
.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: #d65c14; 
} 
.navbar-default .navbar-toggle .icon-bar { 
    background-color: #ffffff; 
}

HTMLは次のとおりです。

<nav class="navbar navbar-default navbar-fixed-top"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Poducts</a></li> 
        <li class="active"><a href="#">Gallery</a></li> 
       </ul> 

      </nav>

次のように出力ナビゲーションバーがある：

Navbar image

出典

2013-12-22 Abdul Ali

あなたが追加する必要がありますCSSを.active aの代わりに.activeに変更してください。

フィドル：このようなhttp://jsfiddle.net/T5X6h/2/

何か：あなたはあなたのコードの "ブートストラップ-theme.css" ファイルを

.navbar-default .navbar-nav > .active{ 
    color: #000; 
    background: #d65c14; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #000; 
    background: #d65c14; 
}

出典

2013-12-22 18:32:22 Ani

は答えをいただき、ありがとうございます。問題は依然として存在します。:) .navbar-default .navbar-nav> .active { color：＃8a0e0b; 背景：＃d65c14; } –

あなたはフィドルを作成できますか？私のために働いているようです。 – Ani

さて、ここに行きます：http://jsfiddle.net/mjyZQ/ – Ani

含まれていましたか？

"bootstrap-theme.min.css"ファイルでは、 "navbar"に ".active"に関する背景画像が存在します（このスクリーンショットを確認してください：http://i.imgur.com/1etLIyY.png）。

スタイルコードを再宣言し、コードに反映されます。

したがって、それらを削除または再宣言した後（背景画像）、「アクティブ」タグに関する背景色のスタイルを使用することができます。

出典

2015-01-07 08:17:21

Bootstrap 3.3.xでは、scrollsky JavaScript機能を使用してアクティブな要素を追跡していることを確認してください。 HTMLに簡単に含めることができます。ただ、次の操作を行います。私は通常私のナビゲーションバー上のアクティブな要素を追跡し、多くの場合

<body data-spy="scroll" data-target="Id or class of the element you want to track">

ので、私は次の操作を行います。

<body data-spy="scroll" data-target=".navbar-fixed-top" >

は、今すぐあなたのCSSにあなたは .navbar-fixed-top .active aをターゲットにすることができます：

.navbar-fixed-top .active a { 
    // Put in some styling 
}

を

これは、固定された一番上のナビゲーションバーでアクティブな要素をトラッキングする場合に有効です。

出典

2015-05-23 11:43:31 moeabdol

まあ、私も同様の挑戦をしました。 Firefoxでinspect要素ツールを使用して、クリックしたときにリンクのスタイルを設定するために使用したマークアップとCSSをトレースすることができました。クリックすると、リストアイテム（li）には.openのクラスが与えられ、グレーの色の背景で書式設定されたクラスのアンカータグです。

これを修正するには、これをスタイルシートに追加してください。私はbootstrap.min.cssその後ロード私自身bootstrap.cssで

.nav .open > a 
{ 
    background:#759ad6; 
    // Put in styling 
}

出典

2015-08-09 21:00:07

、私のために!important作品と背景画像の切り替え：

.navbar-nav li a:hover, .navbar-nav > .active > a { 
    color: #fff !important; 

    background-color:#f4511e !important; 
    background-image: none !important; 
}

出典

2017-07-26 16:34:37 cabanni

ブートストラップ3 navbarアクティブli背景色が変更されない

答えて

関連する問題