ジャンボトロンの色と背景は変更されません

私のジャンボトロンの背景と色を変更しようとしても何も起こりません。 paddingが動作しますが、backgroundは動作しません。ジャンボトロンの色と背景は変更されません

マイCSS：

.jumbotron { 
    padding:70px 30px 70px 30px; 
    margin:0px auto; 
    background: #7986CB ; 
    color:blue; 
} 

.row-header{ 
    margin:0px auto; 
    padding:0px auto; 
}

マイ<body>：

<header class="jumbotron"> 
     <div class="container"> 
      <div class="row row-header"> 
       <div class="col-xs-12 col-sm-8"> 
        <h1>Header</h1> 
        <p style="padding:40px;"></p> 
        <p>bla bla</p> 
       </div> 
       <div class="col-xs-12 col-sm-4"> 
       </div> 
      </div> 
     </div> 
    </header>

なぜ青いのコロルの変更、または＃7986CBの背景ではないだろうか？パディングを変更すると、はがジャンボトロンに影響するため、CSSを含めることはOKです。

出典

2016-07-24 eran

私はそれがうまくhttps://jsfiddle.net/2Lzo9vfc/593/に –

使用：！必要であれば

background-color : #222 !important ;

出典

2016-07-24 15:41:38

あなたが直接ブートストラップのCSSをオーバーライドしているので、あなたは彼らがそうであるように同じ構文を使用する必要があります：

また

.jumbotron { 
    background-color: #7986CB; 
}

、あなたはオーバーライドを強制的に!importantを追加することができますが、これは推奨されません。

デベロッパーツールを使用すると、どのCSSが適用され、どのルールが適用されているかを簡単に確認できます。適用されない有効なルールは省略されます。

出典

2016-07-24 15:38:06 Toby

感謝をうまくいくと思います！ '重要なものが働いた。 'background-color'への変更はありませんでした – eran

は特異性についてカスタムクラスを使用して、あなたはとても単純なもののために重要を使用する必要はありません。 MDN Specificityを参照してください。

実施例：

.jumbotron.jumbotron-blue { 
 
    background: #7986CB; 
 
    color: blue; 
 
    padding: 70px 30px; 
 
    margin: 0; 
 
} 
 
.jumbotron.jumbotron-blue h1 { 
 
    margin: 0; 
 
} 
 
.heading-paragraph { 
 
    padding-top: 70px; 
 
    margin: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<header class="jumbotron jumbotron-blue"> 
 
    <div class="container"> 
 
    <h1>This is a Heading</h1> 
 
    <p class="heading-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    </p> 
 
    </div> 
 
</header> 
 

 
<div class="well">Hello</div>

出典

2016-07-24 17:33:01 vanburen

ジャンボトロンの色と背景は変更されません

答えて

関連する問題