Html 如何更改导航栏的颜色（Bootstrap）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42286606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change color of navbar-inverse (Bootstrap)
提问by Mike
I've got a simple question which is giving me a hard time. I am creating a navbar using Bootstrap and i am trying to change its color but I can't.
我有一个简单的问题，这让我很难过。我正在使用 Bootstrap 创建一个导航栏，我试图改变它的颜色，但我不能。
jsp
jsp
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
css
css
navbar-inverse {
background-color:whatever;
}
Am I doing anything wrong in css?
我在 css 中做错了什么吗？
回答by scoopzilla
Here is what the default for navbar-inverseis:
这是默认值navbar-inverse：
.navbar-inverse {
background-color: #222;
border-color: #080808;
}
Which of course is dark, not the color you want.
当然是深色，不是你想要的颜色。
So instead of using an !importanton your custom rule, you COULD go search for this rule in the bootstrap css.
因此!important，您可以在 bootstrap css 中搜索此规则，而不是在您的自定义规则上使用。
Barring that, place an !importanton your custom rule and it should override.
除此之外，!important在您的自定义规则上放置一个，它应该覆盖。
回答by Mohammed Elzanaty
navbar-inverse is a class so, you can call it by adding ' . ' before the name of the class
navbar-inverse 是一个类，因此您可以通过添加 ' 来调用它。' 在类名之前
.navnavbar-inverse {
background-color:whatever !important;
}
an !important on your custom rule override any other rule of your custom CSS, and now everything should work fine.
!important 在您的自定义规则上覆盖您的自定义 CSS 的任何其他规则，现在一切正常。
回答by neophyte
I always avoid the use of !importantas it can create problems in later part of your project. Assign an id to your element and style it. So, I normally go with the below mentioned way---
我总是避免使用 ，!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>Hope this helps!
希望这可以帮助！
