如何更改navbar-inverse的顏色（引導程序）

我有一個簡單的問題，這給我一個很難。我使用Bootstrap創建了一個導航欄，我正在嘗試改變它的顏色，但是我不能。如何更改navbar-inverse的顏色（引導程序）

JSP

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">

CSS

navbar-inverse { 
background-color:whatever; 
    }

難道我做錯什麼在CSS？

來源

2017-02-16 Mike

如果你的例子是準確的，那麼你要添加一個**。**（點）來指定一個類。 **。navbar-inverse **並確保您的樣式表放置在引導程序之後。 – vanburen

這裏是什麼navbar-inverse默認爲：

.navbar-inverse { 
    background-color: #222; 
    border-color: #080808; 
}

這當然是黑暗的，而不是你想要的顏色。

因此，您可以在自定義規則中使用!important而不是在引導CSS中搜索此規則。

除此之外，將!important放在您的自定義規則上，並且應該覆蓋。

來源

2017-02-16 23:28:11 scoopzilla

非常感謝，它工作。 – Mike

navbar-inverse是一個類，所以你可以通過添加'來調用它。「類

.navnavbar-inverse { 
    background-color:whatever !important; 
}

的名稱之前！您的自定義規則的重要重寫你的自定義CSS的任何其他規則，而現在一切都應該正常工作。

來源

2017-02-16 23:28:17

真棒，它的工作。 – Mike

我總是避免使用!important，因爲它可能會在您的項目後期造成問題。爲您的元素指定一個id並對其進行設置。所以，我通常與以下提到的路要走---

#nav_bar { 
 
background-color: red; 
 
border-color: red; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      
 
      </head> 
 
      <body> 
 
      <nav id="nav_bar" class="navbar navbar-inverse navbar-static-top" role="navigation"></nav> 
 

 
      </body> 
 
      </html>

希望這有助於！

來源

2017-02-17 01:00:12 neophyte

如何更改navbar-inverse的顏色（引導程序）

回答

相關問題