Errore nella modifica del colore del testo nella barra di navigazione Bootstrap

Question

Ho cercato di modificare il colore del testo nella barra di navigazione di un modello di bootstrap e non ho avuto esito positivo. Qualcuno sa dove sto andando male? Ecco il mio codice.

<!--navbar--> 
<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner" id="nav-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">Restaurant</a> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"> </b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
      </ul> 
      </li> 
     </ul> 
     <form class="navbar-search pull-right" action=""> 
      <input type="text" class="search-query span2" placeholder="Search"> 
     </form> 
     </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
</div><!-- /.navbar --> 
<!--navbar--> 

Il CSS:

.navbar-inner { 
    color: #FFF; 
} 

Ho provato anche questo:

#nav-inner { 
    color: #FFF; 
} 

Answer 1

Se si desidera cambiare il CSS per le schede è necessario aggiungere color: #ddd; al seguente

.navbar .nav > li > a { 
    float: none; 
    line-height: 19px; 
    padding: 9px 10px 11px; 
    text-decoration: none; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #ddd; 
} 

Spero che aiuti !!

Answer 2

La mia ipotesi è che Bootstrap definisca una regola CSS più specifica che sta vincendo sulla tua regola più generale. Dovresti esaminare la pagina con gli strumenti di sviluppo di Firefox o Chrome per vedere quali stili stanno vincendo su altri. Se il tuo stile non viene nemmeno visualizzato, allora sai che c'è un problema di base, ma se lo stile di Bootstrap sta annullando il tuo colore, devi dare al tuo stile una precedenza più alta.

Per un controllo di integrità, provate questa regola eccessivo:

html body .navbar .navbar-inner .container { 
    color: #FFF; 
} 

E se funziona, poi sperimentare con un livello inferiore di specificità per vedere come specifica si ha realmente bisogno di ottenere.

Se tutto il resto fallisce, si può sempre fare:

color: #FFF !important; 

Il CSS2 specification stabilisce questo in dettaglio.

Answer 3

.navbar .nav > li > a { 
    float: none; 
    color: #5FC8D6; 
    background-color: #002E36; 
} 
.navbar .nav > li > a:hover { 
    float: none; 
    color: #002E36; 
    background-color: #5FC8D6; 
} 

Answer 4

Funziona ... provarlo .......

.navbar-nav > li > a:link 
{ 
color:red; 
} 

Answer 5

nav.navbar-nav.navbar-right li a { 
    color: blue; 
} 

funziona come un fascino! L'ho trovato su un altro thread, quindi non mi sto prendendo il merito.