Bootstrap 3 navbar active li不改變背景顏色

我已經爲導航欄的活動li元素添加了自定義CSS。但它似乎在挑選默認顏色。其他顏色，如導航欄BG和文字顏色似乎有適當的變化。Bootstrap 3 navbar active 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而不是.active a。

小提琴：http://jsfiddle.net/T5X6h/2/

事情是這樣的：

.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 {0}顏色：＃8a0e0b; 背景：＃d65c14; } –

你可以創建一個小提琴嗎？似乎是爲我工作。 – Ani

好吧，你在這裏：http://jsfiddle.net/mjyZQ/ – Ani

你包括你的代碼「自舉theme.css」文件？

在「bootstrap-theme.min.css」文件中，關於「.active」的背景圖像存在於「navbar」中（請查看此截圖：http://i.imgur.com/1etLIyY.png）。

它會重新聲明你的風格代碼，然後它會影響你的代碼。

因此，刪除或重新聲明它們（背景圖像）後，您可以使用關於「.active」標籤的背景顏色樣式。

來源

2015-01-07 08:17:21

在Bootstrap 3.3.x中，請確保您使用scrollspy 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 
}

如果您正在跟蹤頂部固定導航欄中的活動li元素，這應該有效。

來源

2015-05-23 11:43:31 moeabdol

那麼，我有一個類似的挑戰。使用Firefox中的inspect元素工具，我可以跟蹤標記和用於點擊鏈接樣式的CSS。單擊時，列表項（li）被賦予一個.open類，並且它是類中使用灰色背景格式化的錨標記。

要解決這個問題，只需將其添加到您的樣式表。

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

來源

2015-08-09 21:00:07

在我自己的bootstrap.css，我只有bootstrap.min.css，經過加載，背景圖像與!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

Bootstrap 3 navbar active li不改變背景顏色

回答

相關問題