CSS 更改引导程序导航栏背景颜色和字体颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24127521/
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 bootstrap navbar background color and font color
提问by user2281858
I want to change the background and text color in a bootstrap navbarbut it's not changing as expected... Here is my custom CSS:
我想在引导程序中更改背景和文本颜色，navbar但没有按预期更改...这是我的自定义 CSS：
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
And the relevant HTML:
以及相关的 HTML：
<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
<div class="navbar-header">
<div class="collapse navbar-collapse">
ul and li
</div>
</div>
</div>
I can't figure out why this won't change the background and text-color - can anyone help?
我不明白为什么这不会改变背景和文本颜色 - 任何人都可以帮忙吗？
回答by DivineChef
I have successfully styled my Bootstrap navbar using the following CSS. Also you didn't define any font in your CSS so that's why the font isn't changing. The site for which this CSS is used can be found here.
我已使用以下 CSS 成功设置了 Bootstrap 导航栏的样式。你也没有在你的 CSS 中定义任何字体，所以这就是字体没有改变的原因。可以在此处找到使用此 CSS 的站点。
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
回答by Shawn Taylor
No need for the specificity .navbar-defaultin your CSS. Background color requires background-color:#cc333333(or just background:#cc3333). Finally, probably best to consolidate all your customizations into a single class, as below:
不需要.navbar-defaultCSS 中的特殊性。背景颜色需要background-color:#cc333333（或只是background:#cc3333）。最后，可能最好将所有自定义合并到一个类中，如下所示：
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
..
<div id="menu" class="navbar navbar-default navbar-custom">
Example: http://www.bootply.com/OusJAAvFqR#
回答by APAD1
Most likely these classes are already defined by Bootstrap, make sure that your CSS file that you want to override the classes with is called AFTER the Bootstrap CSS.
这些类很可能已经由 Bootstrap 定义，请确保您要覆盖这些类的 CSS 文件在 Bootstrap CSS 之后调用。
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
Otherwise, you can put !importantat the end of your CSS like this: color:#ffffff!important;but I would advise against using !importantat all costs.
否则，您可以!important像这样将 CSS放在末尾：color:#ffffff!important;但我建议您不要!important不惜一切代价使用它。
