ブートストラップでのプライマリbtnカラーのオーバーライド

私のウェブページ上の特定のボタンについては、色を変更したいと思います。ヘッダーに2番目のスタイルシートがあります。ブートストラップでのプライマリbtnカラーのオーバーライド

 <button class=" btn btn-primary dropdown-toggle school-options" type="button" data-toggle="dropdown">Choose a School 
     <span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Add your school</a></li> 
     </ul>

だから私はクラス.school-optionsを追加し、第二のスタイルシートの上に置く、その後、赤に背景色を設定します。

.school-options { 
    background-color:red; 
}

なぜこれは機能しませんか？解決策は何ですか？

出典

2017-01-30 James Mitchell

のような電子bootstrap CSSブートストラップ・ライブラリは、おそらく 'BTN-主要BTNから優先度の高い（_i.e._、特異性）を持っています'クラス。ブートストラップのような既成のCSSライブラリを使うのが嫌な理由の1つは、ライブラリのスタイルを上回るカスタムスタイルを追加するには、しばしば '！important' CSSフラグを使う必要があるということです。 CSSの地獄は、それぞれが '！important'例外/ルールを使用して、より具体的なセレクタを段階的に取得しようとしています。しかしあなたの質問に答えるために、あなたは '.school-options {background-color：red！important; } ' – IsenrichO

ブートストラップCSSを読み込んだ後にカスタムCSSファイルを読み込みます。そうしないと、望む結果が得られません。 – shishir

-1

いつかあなたはそれ

重要

button.school-オプション{

background-color:red !important;

}

出典

2017-01-30 04:05:15 webmansa

-1

（！重要）クラスは、既存のスタイルを上書きするために使用されるようにする必要があります。
階層CSSは、特定のCSSスタイルを指定するためにも使用されます。ここで

 
btn.school-options { 

background-color:red !important; 
}

出典

2017-01-30 04:24:20

-1

は、私は、カスタムCSSファイルで!importantあなたとカスタムクラスを使用しているフィドル、中にいくつかの更新されたコードです。

ただし、ブートストラップCSSを読み込んだ後にカスタムCSSファイルを読み込みます。そうしないと、望む結果が得られません。

HTML

<button class=" btn btn-primary dropdown-toggle school-options" type="button" data-toggle="dropdown">Choose a School 
    <span class="caret"></span></button> 
<ul class="dropdown-menu"> 
    <li><a href="#">Add your school</a></li> 
</ul>

CSS

.school-options { 
    background-color: red !important; 
}

FIDDLE

出典

2017-01-30 04:33:26 shishir

誰かがダウン投票がある理由を提案することができます – shishir

!importantを使用する必要はありません、あなたは、単にCSSライブラリの状態の順序を変更することでこれを修正することができます、以下のstylesheet

// call bootstrap first 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

// then call the custom style , this will override the bootstrap css 

<link rel="stylesheet" href="css/custom.css">

デモでチェック

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<style> 
 
.school-options { 
 
\t background-color: red; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<button class=" btn btn-primary dropdown-toggle school-options" type="button" data-toggle="dropdown">Choose a School <span class="caret"></span></button> 
 
<ul class="dropdown-menu"> 
 
    <li><a href="#">Add your school</a></li> 
 
</ul>

出典

2017-01-30 04:35:36

ブートストラップでのプライマリbtnカラーのオーバーライド

答えて

関連する問題