Nie można zmienić koloru tekstu w pasku nawigacji Bootstrap

Question

Próbowałem zmienić kolor tekstu w pasku nawigacyjnym szablonu startowego i nie udało się. Czy ktoś wie, gdzie idę źle? Oto mój kod.

<!--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--> 

CSS:

.navbar-inner { 
    color: #FFF; 
} 

Próbowałem też tak:

#nav-inner { 
    color: #FFF; 
} 

Answer 1

Jeśli chcesz zmienić CSS dla kartach trzeba dodać color: #ddd; do następujących

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

Mam nadzieję, że to pomoże!

Answer 2

Domyślam się, że Bootstrap definiuje bardziej szczegółową regułę CSS, która wygrywa z bardziej ogólną zasadą. Należy sprawdzić stronę za pomocą przeglądarki Firefox lub narzędzi programistycznych Chrome, aby sprawdzić, które style wygrywają z innymi. Jeśli twój styl się nie pojawia, to wiesz, że istnieje bardziej podstawowy problem, ale jeśli styl Bootstrap nadpisuje twój kolor, musisz nadać mu wyższy priorytet.

Dla sprawdzenia dokonywane, spróbuj to przesada zasadę:

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

A jeśli to działa, a następnie eksperymentować z niższym poziomem specyficzności, aby zobaczyć, jak specyficzne naprawdę trzeba dostać.

Jeśli wszystko inne zawiedzie, zawsze możesz zrobić:

color: #FFF !important; 

CSS2 specification określa to w szczegółach.

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

Działa ... go wypróbować .......

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

Answer 5

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

działa jak marzenie! Znalazłem go w innym wątku, więc nie biorę za to uznania.