web-dev-qa-db-fra.com

Échec lors de la modification de la couleur du texte dans la barre de navigation Bootstrap

J'ai essayé de changer la couleur du texte dans la barre de navigation d'un modèle de bootstrap et cela a échoué. Quelqu'un sait où je vais mal? Voici mon code.

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

Le CSS:

.navbar-inner {
    color: #FFF;
}

J'ai aussi essayé ceci: 

#nav-inner {
    color: #FFF;
}
csstwitter-bootstrap
12
jfoutch

Si vous voulez changer le css pour les onglets, vous devez ajouter color: #ddd; au suivant 

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

J'espère que ça aide!! 

35
uday

Mon hypothèse est que Bootstrap définit une règle CSS plus spécifique qui l'emporte sur votre règle plus générale. Vous devriez examiner la page avec les outils de développement de Firefox ou de Chrome pour voir quels styles sont gagnants par rapport aux autres. Si votre style n'apparaît même pas, alors vous savez qu'il existe un problème plus fondamental, mais si le style de Bootstrap prend le pas sur votre couleur, vous devez lui donner une priorité plus élevée.

Pour un contrôle de cohérence, essayez cette règle de destruction excessive:

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

Et si cela fonctionne, essayez avec un niveau de spécificité inférieur pour voir à quel point vous avez réellement besoin d'être spécifique.

Si tout échoue, vous pouvez toujours faire:

color: #FFF !important;

La spécification CSS2 énonce cela en détail.

13
maackle
.navbar .nav > li > a {
    float: none;
    color: #5FC8D6;
    background-color: #002E36;
}
.navbar .nav > li > a:hover {
    float: none;
    color: #002E36;
    background-color: #5FC8D6;
}
2
Daniel Raja Singh
nav.navbar-nav.navbar-right li a {
    color: blue;
}

Fonctionne comme un charme! Je l'ai trouvé sur un autre fil, donc je ne prends pas le crédit pour cela.

0
Buddha

Cela fonctionne ... essayez-le .......

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