CSS 在引导程序中更改图标栏 (?) 颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20540563/
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 icon-bar (?) color in bootstrap
提问by a1204773
I want to change ? color.
我想改变 ？颜色。
HTML:
HTML：
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle menu navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
I tried various things (look bellow) but nothing works.
我尝试了各种方法（看下面）但没有任何效果。
CSS:
CSS：
.icon-bar {
color: black;
border-color: black;
background-color: black;
}
回答by James Donnelly
The reason your CSS isn't working is because of specificity. The Bootstrap selector has a higher specificity than yours, so your style is completely ignored.
您的 CSS 不起作用的原因是特殊性。Bootstrap 选择器的特异性比你的高，所以你的风格会被完全忽略。
Bootstrap styles this with the selector: .navbar-default .navbar-toggle .icon-bar. This selector has a Bspecificity value of 3, whereas yours only has a Bspecificity value of 1.
Bootstrap 使用选择器设置它的样式：.navbar-default .navbar-toggle .icon-bar。此选择器的B特异性值为 3，而您的选择器的B特异性值为 1。
Therefore, to override this, simply use the same selector in your CSS (assuming your CSS is included afterBootstrap's):
因此，要覆盖它，只需在您的 CSS 中使用相同的选择器（假设您的 CSS 包含在Bootstrap之后）：
.navbar-default .navbar-toggle .icon-bar {
background-color: black;
}
回答by Prasanth K C
Try over-riding CSSusing !important
尝试过骑着CSS使用!important
like this
像这样
.icon-bar {
background-color:#FF0000 !important;
}
回答by Midun
Just one line of coding is enough.. just try this out. and you can adjust even thicknes of icon-bar with this by adding pixels.
只需一行编码就足够了..试试这个。并且您可以通过添加像素来调整图标栏的均匀厚度。
HTML
HTML
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><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="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png">
</a></div>
CSS
CSS
.navbar-toggle, .icon-bar {
border:1px solid orange;
}
BOOM...
繁荣...
回答by Wong Seng Wee
Dude I know totally how you feel, but don't forget about inline styling. It is almost the super saiyan of the CSS specificity
伙计，我完全了解你的感受，但不要忘记内联样式。它几乎是 CSS 特异性的超级赛亚人
So it should look something like this for you,
所以它对你来说应该是这样的，
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
回答by Sylviamc
I am using Bootstrap & HTML5. I wanted to override the look of the toggle button.
我正在使用 Bootstrap 和 HTML5。我想覆盖切换按钮的外观。
.navbar-toggle{
background-color: #5DADB0;
color: #F3DBAA;
border:none;
}
.navbar-toggle.but-menu:link {
color: #F00;
background-color: #CF995F;
}
.navbar-toggle.but-menu:visited {
color: #FFF;
background-color: #CF995F;
}
.navbar-toggle.but-menu:hover {
color: #FFF0C9;
background-color: #CF995F;
}
.navbar-toggle.but-menu:active {
color: #FFF;
background-color: #CF995F;
}
.navbar-toggle.but-menu:focus {
color: #FFF;
background-color: #CF995F;
}
回答by jesusratti
I do not know if your still looking for the answer to this problem but today I happened the same problem and solved it. You need to specify in the HTML code,
我不知道你是否还在寻找这个问题的答案，但今天我遇到了同样的问题并解决了它。您需要在 HTML 代码中指定，
**<Div class = "navbar"**>
div class = "container">
<Div class = "navbar-header">
or
或者
**<Div class = "navbar navbar-default">**
div class = "container">
<Div class = "navbar-header">
You got that place in your CSS
你在你的 CSS 中有那个位置
.navbar-default-toggle .navbar .icon-bar {
background-color: # 0000ff;
}
and what I did was add above
我所做的是在上面添加
.navbar .navbar-toggle .icon-bar {
background-color: # ff0000;
}
Because my html code is
因为我的 html 代码是
**<Div class = "navbar">**
div class = "container">
<Div class = "navbar-header">
and if you associate a file less / css
如果你关联一个文件 less / css
search this section and also here placed the color you want to change, otherwise it will self-correct the css file to the state it was before
搜索此部分，并在此处放置您要更改的颜色，否则它会将 css 文件自我更正为之前的状态
// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-default-toggle-icon-bar-bg: # 888;**
@ Navbar-default-toggle-border-color: #ddd;
if your html code is like mine and is not navbar-default, add it as you did with the css.
如果您的 html 代码和我的一样并且不是导航栏默认的，请像使用 css 一样添加它。
// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-toggle-icon-bar-bg : #888;**
@ Navbar-default-toggle-icon-bar-bg: # 888;
@ Navbar-default-toggle-border-color: #ddd;
good luck
祝你好运
