web-dev-qa-db-fra.com

Comment changer bootstrap 4 couleurs déroulantes?

J'essaie de changer l'arrière-plan et la couleur de la police de la navigation déroulante bootstrap 4).

J'ai essayé d'utiliser

.nav.nav-tabs > li.dropdown.active.open > a, 
.nav.nav-tabs > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-tabs > li.dropdown.open > a, 
.nav.nav-tabs > li.dropdown.open > ul.dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

Mais cela ne fonctionnait pas trop bien pour moi. Voici mon HTML:

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
  Dropdown link
</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
htmlcsstwitter-bootstrapbootstrap-4
9
Temple
.dropdown {list-style: none; background: green; padding: 10px; display: inline-block;}
.dropdown .nav-link {color:#fff; text-decoration: none;}
.dropdown .dropdown-menu a{color: #000; text-decoration: none;}
.dropdown .btn {background: green; color:#fff;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;}
.dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
  Dropdown link
</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
</div>

</body>
</html>

Voici un peu de code, j'espère que cela vous aidera.

Modifié

Ça fonctionne bien maintenant

13
Nirav Joshi

Je sais que cela a déjà été répondu, mais depuis que je le signets, je veux donner la solution qui a fonctionné pour moi quand sur le thème Bootsrap en utilisant Sass et NPM.

Notez que j'inclus des fonctions et des variables au-dessus de mes personnalisées car j'ai besoin d'y accéder sinon la compilation échouera. En savoir plus à ce sujet sur cette question .

Supposons que vous ayez votre _custom.scss comme ça:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Add your custom variables here

@import "~bootstrap/scss/bootstrap";

Ensuite, vous pouvez aller dans fichier de variables principales de Bootstrap et copier sur celles que vous souhaitez écraser.

Par exemple, si je veux que mon fond de liste déroulante soit sombre avec des liens blancs, je le ferais comme:

$dropdown-bg:                       $dark;
$dropdown-link-color:               $light;

Et mon _custom.scss fichier après que les changements aimeraient ceci:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Add your custom variables here
$dropdown-bg:                       $dark;
$dropdown-link-color:               $light;

@import "~bootstrap/scss/bootstrap";

Et voici une image de ce à quoi il ressemble après avoir compilé Sass:

Bootstrap's dropdown with dark background

De cette façon, je n'écrase pas les règles CSS en évitant l'encombrement inutile.

12
jolvera

Dans Bootstrap v4.3.1 Je copie simplement le CSS path depuis le navigateur developer tools, et l'ajouter à mon Website.css, et y ajouter quelques styles à l'apparence du site web que je suis en train de créer:

/*drop-down override*/
div.btn-group.show div.dropdown-menu.show {
  background-color: #4b4b4b;
}

div.btn-group.show div.dropdown-menu.show button.dropdown-item {
  color: #e1e1e1;
}

div.btn-group.show div.dropdown-menu.show div.dropdown-divider {
  border-top: 1px solid rgba(50, 50, 50, 0.9);
}

div.btn-group.show div.dropdown-menu.show button.dropdown-item:hover,
div.btn-group.show div.dropdown-menu.show button.dropdown-item:focus {
  background-color: #1e1e1e;
  color: #f0f0f0;
}

Le résultat devrait ressembler à ceci:

Output dropdown menu

1
Ashraf Abusada