Bootstrap 4 Ecraser règle

Question

Je suis en train de changer de couleur de lien barre de navigation dans bootstrap 4 comme

.nav-link { 
    color: red; 
} 

Mon fichier SCSS ressemble que

@import '../../public_html/static/vendor/bootstrap/scss/bootstrap'; 

.nav-link { 
    color: red; 
} 

Mais sans ! Important cela ne travail.

Qu'ai-je manqué?

Answer 1

Il semble que la première règle soit plus spécifique que celle que vous avez ajoutée et qu'elle soit prioritaire.

Si vous changez votre sélecteur:

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

Ensuite, il devrait fonctionner puisqu'il est le même niveau de-ness spécifique, mais plus bas dans la source.

Si vous ne souhaitez pas modifier le sélecteur, vous pouvez toujours ajouter !important, par ex.

.nav-link { 
    color: red !important; 
} 

, mais il est généralement pas une bonne idée de jeter !important quand il peut résoudre en une plus belle manière que cela pourrait vous causer des problèmes plus bas de la ligne.

Answer 2

En regardant this réponse que vous pouvez faire ce qui suit pour un remplacement complet:

.nav-link[class="nav-link"] { 
    color: red; 
} 

Answer 3

Donnez le chemin complet à ce lien comme ..

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