2014-04-21 8 views
0

Je suis nouveau Bootstrap/PHP, donc s'il vous plaît soyez gentil :-)Bootstrap 3 menus déroulants

Le code est le suivant:

<div class = "navbar navbar-inverse navbar-fixed-bottom"> 
    <div class = "container"> 
    <p class = "navbar-text pull-left">Copyright 2014 by ABC</p> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle = "dropdown" style="color: #ffffff;">Support<b class = "caret"></b></a> 
     <ul class = "nav navbar-nav navbar-right dropdown-menu"> 
      <li><a href="#">Help</a></li> 
      <li><a href="#">FAQ</a></li> 
      <li><a href="#">How To</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

Cela crée une barre de navigation en bas de la page avec un menu déroulant. La barre de navigation est de couleur inversée, de sorte que le texte a été défini sur blanc pour maximiser le contraste.

Malheureusement, le résultat est un texte blanc sur fond blanc lorsque vous essayez de sélectionner dans le menu. Je suppose que j'ai besoin de remplacer le CSS de Bootstrap, mais je ne suis pas sûr de ce qu'il faut contourner.

Et je préférerais ne pas visser avec le fichier CSS Bootstrap juste au cas où je soufflerais tout.

Un grand merci

+1

Peut-être que nous donner un exemple minimal de votre problème, par exemple sur JSFiddle, serait une excellente idée. – Terry

+0

Bonne suggestion pour la prochaine fois, j'espère quand j'aurai appris à utiliser JSFiddle :-) – user173847

Répondre

0

Vous avez remplacé la couleur de lien en ajoutant un style en ligne style="color: #ffffff;". C'est une mauvaise pratique car elle aura préséance sur toutes les autres déclarations à cet élément (: hover,: active, ...).

Si vous souhaitez modifier les valeurs par défaut Bootstrap, vous devriez le faire dans un fichier CSS séparé. Dans ce cas, le style serait:

.navbar-inverse .navbar-nav>li>a { 
    color: white; 
} 

Vous avez des cours supplémentaires sur votre menu déroulant

<ul class="nav navbar-nav navbar-right dropdown-menu"> 

Il devrait être

<ul class="dropdown-menu"> 

Vous pouvez voir le résultat here.

+0

Merci - cela a résolu le problème et m'a donné assez pour continuer à apprendre! – user173847

0

Les années ci-dessus, par LeBen est assez bien. Mais, tout en travaillant sur Bootstrap, gardez un œil tout en remplaçant Bootstrap CSS. Vous pouvez facilement le jouer d'abord dans Firebug puis redéfinir, et placer un commentaire commun avec sa description afin que vous puissiez facilement le découvrir. Et, tout en prenant soin de ne pas affecter l'autre partie du projet, pensez donc avant de le surcharger

+0

Merci pour la suggestion - je vais essayer. – user173847