2016-12-09 5 views
0

私の人生では、ナビの丸薬のデフォルトの青色の背景色を取り除くことはできません。あなたが尋ねる前に、私は同様の質問を見て、提案された解決策を試してみました。私はHTML/CSSにかなり新しいです、そして、これはおそらく何らかの愚かな質問になるでしょうが、どうしたらいいでしょう。 Since I'm working with a grey background navigation bar, I'd like the tabs to have a color that'd complement itnav-pillsのデフォルトの背景色を青から変更することができません。

ここでは、コードです:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" type="text/css" href="Random.css" /> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 
    <nav> 
 
    <ul class="nav nav-pills"> 
 
     <li><a href="#" target="_blank">C.O. Dev.</a> 
 
     </li> 
 
     <li class="pull-right"><a href="#">Contact</a> 
 
     </li> 
 
     <li class="pull-right"><a href="#">My Work</a> 
 
     </li> 
 
     <li class="pull-right"><a href="#">About</a> 
 
     </li> 
 
     <li class="pull-right active"><a href="#">Home</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

+0

ですか?その場合は、*ブートストラップの後に*をロードして、定義を上書きするようにしてください。 CSSの作品は最後の勝利を定義しました。 – connexo

答えて

1

はあなたのカスタムCSSでそれをオーバーライドする必要があります。 nav.lessは、アクティブなナビゲーションのスタイルを支配しました。独自のCSSを作成し、この使用: `Random.css`独自のCSSは、私が想定し

.nav-pills>li.active>a{ 
color: #337ab7 !important; 
background-color: #eee !important; 
} 

.nav-pills>li.active>a{ 
 
color: #337ab7 !important; 
 
background-color: #eee !important; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" type="text/css" href="Random.css" /> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 
    <nav> 
 
    <ul class="nav nav-pills"> 
 
     <li><a href="#" target="_blank">C.O. Dev.</a> 
 
     </li> 
 
     <li class="pull-right"><a href="#">Contact</a> 
 
     </li> 
 
     <li class="pull-right"><a href="#">My Work</a> 
 
     </li> 
 
     <li class="pull-right"><a href="#">About</a> 
 
     </li> 
 
     <li class="pull-right active"><a href="#">Home</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

+0

ありがとうございます。 '!important'の部分を追加することはやりました。私はそれを省略していた。 –

+0

[使用する場合は重要!] –

+0

私の答えがあなたのニーズに合っていれば、正しいaswerを受け入れることが非常に簡単です(https://css-tricks.com/when-using-important-is-the-right-choice/)。とても有難い。 :D –

関連する問題