如何更改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的颜色（引导程序）

回答

相关问题