Overriding Bootstrap zum Ändern der Farbe der Navbar-Links

Question

Ich bin so verwirrt über, warum ich nicht die color Eigenschaft der Schriftart in einer Navbar in meiner Rails App, die Bootstrap 3 verwenden kann. Ich habe derzeit eine Klasse namens navbar-brand2, die ist Ändern anderer Verbindungseigenschaften erfolgreich (wie das Erstellen eines Rahmens), aber ich kann die Farbe selbst nicht ändern.

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> 

Teil 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; 
} 

Andere Dinge, die ich habe Versuchte

Ich dachte, vielleicht den <a> Tag in meinem CSS direkt Referenz ich brauchte, um, so fügte ich dies auch:

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

obwohl gleiches Problem. Ich habe nichts in der Dokumentation oder anderen Antworten gesehen: Muss ich etwas Spezielles tun, um die Standardfarbe zu überschreiben (was bedeutet, dass meine Strategie durch die Definition einer Klasse niemals für diese eine spezifische Eigenschaft funktioniert)?

Answer 1

Verwendung wichtig für

Standardfarbwechsel

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

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

Answer 2

ich vermeiden würde !important wenn möglich verwenden. Stattdessen versuchen Sie, Ihre Wähler präziser

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

Oder mit weniger zu machen:

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

Ich habe einen Text hier, die ich für die Erstellung von leicht zu pflegende Bootstrap-Themen verwenden. Schauen Sie sich die Anweisungen in der README an.

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