更改bootstrap导航栏背景颜色和字体颜色

Question

我想在引导程序中更改背景和文本颜色,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>

我无法弄清楚为什么这不会改变背景和文字颜色 - 任何人都可以帮忙吗？

Answer 1

我使用以下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*/
}

Answer 2

不需要.navbar-defaultCSS中的特异性.背景颜色需要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#

Answer 3

很可能这些类已经由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 -->

否则,您可以!important像这样放在CSS的末尾:color:#ffffff!important;但我建议不要!important不惜一切代价使用它.