如何更改 navbar-inverse 的颜色（Bootstrap）答案

【问题标题】：How to change color of navbar-inverse (Bootstrap)如何更改 navbar-inverse 的颜色（Bootstrap）
【发布时间】：2017-07-06 07:28:18
【问题描述】：

我有一个简单的问题让我很为难。我正在使用 Bootstrap 创建一个导航栏，我正在尝试更改它的颜色，但我不能。

jsp

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

css

navbar-inverse {
background-color:whatever;
     }

我在 css 中做错了吗？

【问题讨论】：

如果您的示例是准确的，那么您需要添加一个 .（点）来指定一个类。 .navbar-inverse 并确保您的样式表位于引导程序之后。

标签： html css twitter-bootstrap jsp background-color

【解决方案1】：

这是navbar-inverse 的默认值：

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

当然是深色的，不是你想要的颜色。

因此，您可以在引导 css 中搜索此规则，而不是在自定义规则上使用 !important。

除此之外，在您的自定义规则上放置一个!important，它应该被覆盖。

【讨论】：

【解决方案2】：

navbar-inverse 是一个类，所以你可以通过添加 ' 来调用它。 ' 在类名之前

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

自定义规则中的 !important 会覆盖自定义 CSS 的任何其他规则，现在一切正常。

【讨论】：

【解决方案3】：

我总是避免使用!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>

希望这会有所帮助！

【讨论】：