Je veux changer la couleur de police de la barre de NAV en blanc, mais j'ai du mal à identifier la classe CSS correcte à appeler pour le faire. "NAVBAR" en haut à gauche est déjà blanche à cause de la CSS de Bootstraps, mais je veux changer de "contact", "portefeuille" et "sur" à blanc aussi.
html CSS
3 Réponses :
dans votre principale "classe de navigation", vous avez sélectionné "BG-primaire", essayez ceci
Utilisation: et ajoutez
Cela ne change pas le texte en blanc, comme demandé.
Vérifiez ça!!!!!!
Vérifiez ceci pour référence Stackoverflow.com/questions/61169561/...
@TerryMorse je suppose que vous avez demandé cela ne faisiez-vous pas non plus vous avez vérifié ma réponse qui a commenté la négative à ce sujet
"NAVBAR-Light" définit la couleur du texte sur le noir et non blanche. Ajout de «Texte-blanc» à chaque lien fonctionnera, mais c'est une technique de force brute. Pas de différence de paramètre style = "couleur: blanc sur chaque lien.
@TerryMorse Cela fonctionnera
Oui ça marchera. Mais cela nécessite un marquage sur chaque lien. Plutôt inefficace.
Pour la couleur de texte globale dans une barre NAV, il existe deux classes: Les liaisons NAVBAR ont une opacité réduite, de sorte qu'ils ne seront ni complètement noirs ni complètement blancs. P > Pour forcer toutes les couleurs de liaison au blanc, vous pouvez cibler la règle un exemple de travail : p> p> NAVBar-sombre code> et NAVBAR-Light code>. NAVBAR-sombre Code > a une couleur de base de blanc. NAVBar-Light Code> a une couleur de base de noir, avec une opacité de 90%. P> .nav-link code>, comme celle-ci: p>
<!-- navbar-dark with link text forced to white -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- insert this style *after* linking Bootstrap -->
<style>
.navbar-dark .navbar-nav .nav-link {
color: white;
}
</style>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler mr-5" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"> Contact <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>