ブートストラップを無効にしてnavbarリンクの色を変更する

Question

Bootstrap 3を使用している私のRailsアプリケーションのnavbarで、フォントのcolorプロパティを変更できない理由が混乱しています。現在、navbar-brand2というクラスがあります。他のリンクプロパティを正常に変更する（枠線の作成など）が、色自体を変更することはできません。

CODEPEN

header.html.erb

<nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Home Page</a> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
      <li class="whatever"><a class="navbar-brand2" href="#">Contact</a></li> 
      <li class="whatever"><a class="navbar-brand2" href="#">About Us</a></li> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

部分的なCSS

.navbar-brand2 { 
    font-family: 'Londrina Solid', cursive; 
    color: white; 
    font-size: 1.6em; 
    letter-spacing: 1.5px; 
    padding-left: 13px; 
    padding-right: 13px; 
    margin-top: 12px; 
    border: white 2px solid; 
    border-radius: 12px; 
    margin-right: 10px; 
} 

.navbar-brand2 a { 
    color: #F5F5F5; ; 
} 

.navbar-brand2:hover { 
    color: #E4491C; 
    border-color: #E4491C; 
    text-decoration: none; 
} 

他の事私は

を試してみました

私は多分、私が直接私のCSSで<a>タグを参照するために必要なと思ったので、私は、同様にこれを追加しました：

.navbar-brand2 a { 
    color: white; 
    font-weight: bold; 
} 

同じ問題にかかわらず。ドキュメントやその他の回答で何も見たことがありません：デフォルトの色をオーバーライドするために何か特別な処理を行う必要がありますか？

Answer 1

デフォルトの色

.navbar-brand2 { 
    color: white !important; 
} 

http://codepen.io/nagasai/pen/vKjgwZ

Answer 2

を変更するための重要な使用私は、可能な場合!importantを使用して避けるだろう。代わりに

.nav.navbar-nav .navbar-brand2 { 
    color: white; 
} 

以下であなたのセレクタは、より具体的にするために試してみてください。

.nav { 
    &.navbar-nav { 
     .navbar-brand2 { 
      color: white; 
     } 
    } 
} 

私は簡単に保守ブートストラップのテーマを作成するために使用し、ここで定型を持っています。 READMEの指示を確認してください。

https://github.com/patrickleet/bootstrap-override-boilerplate