如何更改 navbar-inverse 的颜色 (Bootstrap)

Question

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

jsp

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

css

navbar-inverse {
background-color:whatever;
     }

我在 css 中做错了什么吗？

Answer 1

这是 navbar-inverse 的默认值：

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

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

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

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

Answer 2

navbar-inverse 是 class 因此，您可以通过添加 ' 来调用它。 ' 在 class

的名称之前

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

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

Answer 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>

希望对您有所帮助！

如何更改 navbar-inverse 的颜色 (Bootstrap)

How to change color of navbar-inverse (Bootstrap)

html

css

jsp

background-color

twitter-bootstrap