web-dev-qa-db-ja.com

bootstrap navbarの背景色とフォントの色を変更します

bootstrap 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>

なぜこれが背景とテキストの色を変えないのかわかりません-誰でも助けてもらえますか？

csstwitter-bootstraptwitter-bootstrap-3
33
user2281858

次のCSSを使用して、Bootstrap navbarのスタイル設定に成功しました。また、CSSでフォントを定義しなかったため、フォントは変更されません。このCSSが使用されているサイトは here にあります。

.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*/
}
46
DivineChef

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#

41
Shawn Taylor

ほとんどの場合、これらのクラスはすでに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を使用することは避けてください。

6
APAD1