無法使用Bootstrap或CSS更改nav-pills背景顏色

我有一個簡單的導航欄固定在我的頁面頂部，可以看到here但我不能爲我的生活弄清楚如何更改背景顏色。我試過編輯Bootstrap CSS文件中的a：hover代碼以及使用各種不同的類調用在我自己的自定義CSS文件中重寫它，但仍然沒有運氣。有人可以幫我嗎？我知道它必須是簡單的東西，我只是難住。無法使用Bootstrap或CSS更改nav-pills背景顏色

下面是導航欄我的HTML代碼：

<div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </a> 
       <a class="brand" href="index.html">Homegrown</a> 
      <div class="nav-collapse"> 
       <ul class="nav nav-pills pull-right"> 
        <li class="active"><a href="index.html">Home</a></li> 
        <li><a href="index.html">About</a></li> 
        <li><a href="index.html">Contact</a></li> 
       </ul><!-- /.nav --> 
      </div><!--/.nav-collapse --> 
      </div><!-- /.container --> 
     </div><!-- /.navbar-inner --> 
    </div><!-- /.navbar -->

來源

2013-01-23 Brian

導航欄背景.navbar-inner下樣式。一個簡單的方法來弄清楚什麼樣的元素有什麼風格是使用像chromes檢查器（視圖>開發人員>開發人員工具）或firebug for firefox（http://getfirebug.com/）調試工具

來源

2013-01-23 03:58:18

任何想法爲什麼'a：active'與'a：hover'不一樣？ – Brian

對不起，我猜錯了你的問題，注意到li有一個叫active的類，你需要改變它來改變背景顏色：'.navbar .nav> .active> a，.navbar .nav> .active> a ：hover，.navbar .nav> .active> a：focus' –

感謝您的幫助，它最終成爲：.navbar .nav> .active a，.navbar .nav> .active a：hover，.navbar .nav > li a：hover {} – Brian

如果你是使用Sass或更少，您可以從_navs.scss自定義這些變量：

//== Pills 
$nav-pills-border-radius:     $border-radius-base !default; 
$nav-pills-active-link-hover-bg:   $component-active-bg !default; 
$nav-pills-active-link-hover-color:   $component-active-color !default;

您可以找到相應較少的值和文件。

這裏的文檔：http://getbootstrap.com/customize/#navbar

然而，源更容易遵循這種定製。

來源

2014-12-19 06:09:32 justingordon

無法使用Bootstrap或CSS更改nav-pills背景顏色

回答

相關問題