Estoy tratando de cambiar el fondo y el color de la fuente de la bootstrap 4 desplegable de navegación.

Traté de usar

.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;
}

Pero esto no estaba funcionando demasiado bien para mí. Aquí está mi código 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>

OriginalEl autor Temple | 2017-06-18

2 Comentarios

  1. 6

    Sé que esto ya está respondido, pero ya estoy de marcadores, quiero dar la solución que funcionó para mí cuando tematización Bootsrap Sass y NPM.

    Nota que me incluir funciones y variables por encima de mi costumbre, porque necesito tener acceso a ellos, de lo contrario fallará la compilación. Leer más sobre ella en este tema.

    Supongamos que usted tiene su _custom.scss como este:

    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    
    //Add your custom variables here
    
    @import "~bootstrap/scss/bootstrap";

    Entonces usted puede ir a Bootstrap principal de variables archivo y copia sobre la que desea sobrescribir.

    Por ejemplo, si quiero que mi desplegable fondo sea oscuro con blanco vínculos yo lo haría como:

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

    Y mi _custom.scss archivo después de los cambios gustaría como este:

    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    
    //Add your custom variables here
    $dropdown-bg:                       $dark;
    $dropdown-link-color:               $light;
    
    @import "~bootstrap/scss/bootstrap";

    Y esta es una imagen de lo que parece después de la recopilación de Sass:

    Cómo cambiar bootstrap 4 desplegable de colores?

    De esta manera yo no sobrescribir las reglas CSS evitar un desorden innecesario.

    OriginalEl autor jolvera

  2. 0

    En Bootstrap v4.3.1 yo simplemente copia el CSS path desde el navegador developer tools, y añadirlo a mi Website.css, y añadir algunos estilos para mucho el look and feel de la página web que estoy construyendo:

    /*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;
    }

    El resultado debería parecerse a esto:

    Cómo cambiar bootstrap 4 desplegable de colores?

    Estoy usando exactamente Bootstrap versión 4.3.1 y esto no está funcionando para mí para nav elemento de las listas desplegables. Pero gracias por compartir 🙂

    OriginalEl autor Ashraf Abusada

Dejar respuesta

Please enter your comment!
Please enter your name here