web-dev-qa-db-fra.com

bootstrap 4 changer la couleur de nav-pill active

Je peux attribuer une couleur d'arrière-plan personnalisée à chacune des pilules, mais ce que j'aimerais vraiment, c'est avoir une couleur décolorée pour chaque pilule personnalisée (ce qui est juste une question de changer les valeurs ci-dessus), et avoir la correspondance de couleur active qui couleur de la pilule correspondante.

  • pilule un> rouge fané
  • pilule deux> bleu délavé
  • pilule trois> noir délavé

Quand

  • pilule un actif> rouge
  • pilule deux active> blu
  • pilule trois active> noir

mon code

<ul class="nav nav-pills">
  <li class="nav-item pill-1">
    <a class="nav-link active" href="#">pill one</a>
  </li>
  <li class="nav-item pill-2">
    <a class="nav-link" href="#">pill two</a>
  </li>
  <li class="nav-item pill-3">
    <a class="nav-link" href="#">pill three</a>
  </li>
</ul>

css

.pill-1 a {
    background-color: rgba(255, 0, 0, 0.5);
}

remplacement de bootstrap

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #d9d9d9;
}
cssbootstrap-4
6
keneso

Utilisez la spécificité CSS appropriée pour les pilules actives/inactives. Par exemple:

https://www.codeply.com/go/Oe6EteovP

/* not active */
.nav-pills .pill-1 .nav-link:not(.active) {
    background-color: rgba(255, 0, 0, 0.5);
}

.nav-pills .pill-2 .nav-link:not(.active) {
    background-color: rgba(0, 250, 0, 0.5);
}

.nav-pills .pill-3 .nav-link:not(.active) {
    background-color: rgba(0, 0, 250, 0.5);
    color: white;
}


/* active (faded) */
.nav-pills .pill-1 .nav-link {
    background-color: rgba(255, 0, 0, 0.2);
    color: white;
}

.nav-pills .pill-2 .nav-link {
    background-color: rgba(0, 250, 0, 0.2);
}

.nav-pills .pill-3 .nav-link {
    background-color: rgba(0, 0, 250, 0.2);
    color: white;
}
9
Zim