web-dev-qa-db-fra.com

Bootstrap Modifier les couleurs des liens de la barre de navigation

Je sais que ce sujet a été battu à mort, mais ce que j'ai lu ne fonctionne pas. J'essaie simplement de changer les liens dans ma bootstrap navbar en blanc. Je sais que j'ai le CSS dessus parce que je peux changer la taille de la police, mais pas la couleur.

nav .navbar-nav li{
  color: white !important;
  font-size: 25px;
  }

<nav class="navbar navbar-expand-lg navbar-light fixed-top sticky-top">
  <%= link_to root_path, class: 'navbar-brand' do %>
            <span class="fa fa-home" aria-hidden="true"> Bartlett Containers LLC</span>  <% end %>


  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
      <li class="nav-item">
        <%=link_to 'Pricing', pricing_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'FAQ', faq_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'Contact', contact_path, class: 'nav-link' %> 
      </li>

    </ul>
  </div>
</nav>
htmlcssruby-on-railstwitter-bootstrapbootstrap-4
4
Mason SB

définissez color sur l'élément a à l'intérieur de li.

nav .navbar-nav li a{
  color: white !important;
  }
9
ztadic91

Le !important L'indicateur est uniquement destiné aux tests rapides. Son utilisation comme solution permanente a tendance à poser des problèmes plus tard et doit donc être évitée.

La meilleure pratique pour remplacer le CSS est simplement de s'assurer que la spécificité de votre règle CSS personnalisée correspond ou dépasse la spécificité de la règle Bootstrap. Et bien sûr, le CSS personnalisé doit être chargé après Bootstrap css.

Donc, dans ce cas particulier, vous pouvez utiliser une règle qui ressemble à ceci:

.navbar-light .navbar-nav .nav-link {
    color: red;
}

Plus d'informations sur la spécificité CSS:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Et: calculateur de spécificité CSS

5
WebDevBooster