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;
}

当然是黑暗的，而不是你想要的颜色。

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

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

Answer 2

navbar-inverse是一个类，所以你可以通过添加＆＃39;来调用它。。＆＃39;在班级名称之前

.navnavbar-inverse {
    background-color:whatever !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）的颜色

3 个答案: