twitter-bootstrap 更改折叠的导航栏颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31369078/
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
Change collapsed navbar color
提问by Keith
I'd like to know what CSS element must be edited to adjust bootstrap's collapsed navbar. Below is what I believe to be the CSS code of interest:
我想知道必须编辑哪些 CSS 元素才能调整引导程序的折叠导航栏。以下是我认为感兴趣的 CSS 代码：
.navbar-default {
background-color: #ffffff;
border-color: #0f4c92;
}
.navbar-default .navbar-brand {
color: #0f4c92;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #0f4c92;
}
.navbar-default .navbar-nav > li > a {
color: #0f4c92;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #0f4c92;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #0f4c92;
}
.navbar-default .navbar-toggle {
border-color: #0f4c92;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #0f4c92;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #0f4c92;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #0f4c92;
}
.navbar-default .navbar-link {
color: #0f4c92;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #0f4c92;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #0f4c92;
}
}
Hopefully I've captured the right selectors. Below are screenshots showing the the unselected collapsed nav (which you can see is what I'm hoping to edit), and then the selected collapsed nav. Ideally I'd like to make the unselected collapsed nav the same blue color, with 3 white stripes; I don't care if it's the same color scheme when active/selected.
希望我已经捕捉到了正确的选择器。下面的屏幕截图显示了未选择的折叠导航（您可以看到我希望编辑的内容），然后是选定的折叠导航。理想情况下，我想让未选择的折叠导航具有相同的蓝色，带有 3 条白色条纹；我不在乎它在活动/选择时是否是相同的配色方案。
Edit -- adding the HTML
编辑——添加 HTML
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/bestgatelogo1.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
回答by Siddharth Thevaril
If you want to change the
background-colorof the image on right, you need to edit class -.navbar-toggleFor
border-color, edit class -.navbar-inverse .navbar-toggleFor the 3 horizontal stripes, edit class -
.navbar-inverse .navbar-toggle .icon-bar
如果你想改变
background-color右边的图像，你需要编辑类 -.navbar-toggle对于
border-color，编辑类 -.navbar-inverse .navbar-toggle对于 3 个横条纹，编辑类 -
.navbar-inverse .navbar-toggle .icon-bar
Note -You might need to add more weight to your selectors ORadd !importantto every CSS property. For example - background-color: red !important
注意 -您可能需要为选择器添加更多权重或添加!important到每个 CSS 属性。例如 -background-color: red !important
