更改引导程序的导航栏背景颜色和字体颜色
我想要更改自举navbar的背景和文本颜色，但不会按预期更改......以下是我的自定义CSS：
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
和相关的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>
我不明白为什么这不会改变背景和文字颜色 - 任何人都可以帮忙吗？
我已经使用以下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*/
}
不需要CSS中的特定.navbar-default 。 背景颜色需要background-color:#cc333333 （或只是background:#cc3333 ）。 最后，可能最好将所有自定义项整合到一个类中，如下所示：
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
例如：http：//www.bootply.com/OusJAAvFqR#
很可能这些类已经由Bootstrap定义，请确保您想要覆盖类的CSS文件称为AFTER Bootstrap CSS。
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
否则，你可以把!important放在你的CSS的最后，像这样： color:#ffffff!important; 但我会建议不要使用!important不惜一切代价。
上一篇: Change bootstrap navbar background color and font color