¿Cómo eliminar la flecha en el menú desplegable en Bootstrap 4?


118

Estoy usando Bootstrap 4. Traté de quitar la flecha en el menú desplegable.

Las respuestas que encontré para Bootstrap 3 ya no funcionan.

El jsfiddle está aquí .

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

Respuestas:


176

Simplemente elimine la clase "dropdown-toggle" del elemento. El menú desplegable seguirá funcionando si tiene el atributo de alternancia de datos de la siguiente manera

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

anular los estilos de clase .dropdown-toggle afecta a todos los menús desplegables y es posible que desee mantener la flecha en otros botones, por eso esta me parece la solución más simple.

Editar: mantenga la clase desplegable si desea mantener el estilo del borde

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

3
Por alguna razón, las otras soluciones no me funcionaron. Estoy ejecutando Bootstrap 4. Esto fue lo único que funcionó.
anonymousacorn

9
Esto no funcionó para mí. El lado derecho del botón ya no está redondeado.
Jace Browning

Más simple que escribir CSS personalizado con !important:)
hughjdavey

2
¡Probé esto y funciona bastante bien! Probado en FF, Chrome, IE y Opera, incluso en dispositivos móviles Android con navegador integrado sin flechas molestas, ¡muchas gracias, señor! AVISO: no elimine el atributo "dropdown-toggle" completo, simplemente elimine el atributo "-toggle", para que su estilo para el menú desplegable no desaparezca. Entonces, "dropdown-toggle" se convierte en "dropdown" - espero que esto ayude.
Kerim Yagmurcu

126

Con CSS, podrías hacer eso:

.dropdown-toggle::after {
    display:none;
}

11
También tuve que incluir !importantpara que este CSS personalizado surta efecto.
Jace Browning

1
Esto afectará a todos los menús desplegables utilizados en otras páginas si utiliza el mismo CSS.
Pavan Nath

agregue un poco más de prefijo para deshabilitar solo la flecha para el botón, por ejemplo: .btn.btn-outline-secondary.dropdown-toggle :: after {display: none! important; }
puppylpg

35

No recomiendo ninguna de las respuestas existentes porque:

  • .dropdown-toggletiene más estilo que solo el símbolo de intercalación. Eliminar la clase del elemento causa problemas de estilo .

  • Anular .dropdown-toggleno tiene sentido. El hecho de que no necesite un símbolo de intercalación en algún elemento en particular, no significa que no lo necesite más adelante.

  • ::afterno cubre las variantes desplegables (algunos usos ::before).

Use una costumbre .caret-offen el mismo elemento que su .dropdown-toggleelemento:

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

3
La mejor respuesta, solo agregaría información adicional para otras personas, como esta clase debería agregarse junto con dropdown-toggle.
eestein


5

Si está interesado en reemplazar la flecha con otro ícono (como FontAwesome), solo tendrá que eliminar el borde del pseudo elemento de .dropdown-toggle

.dropdown-toggle::after { border: none; }

4

Estuve usando la respuesta aceptada durante bastante tiempo en mi proyecto, pero ahora me encontré con una variable utilizada por bootstrap :

$enable-caret: true !default;

Si establece esto en falso, el símbolo de intercalación se eliminará sin tener que hacer ningún código personalizado.

Mi proyecto era Ruby / Rails, así que estaba usando bootstrap-rubygem . Cambié la variable importando un custom-variables.scsscon la variable anterior establecida en falso en mi application.scss ANTES del bootstrap.scssarchivo / archivos.


2

Si quita ajustar la clase desplegable-alternar como se muestra a continuación, todos los botones desplegables de su sistema ya no tendrán el símbolo de intercalación.

.dropdown-toggle::after {
    display:none;
}

Pero tal vez eso no sea lo que quieres, así que para eliminar solo el botón específico, insertaremos una clase llamada: remoecaret, y ajustaremos la clase: dropdown-toggle de la siguiente manera:

.removecaret.dropdown-toggle::after {
    display: none;
}

y nuestro html se parece a:

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>

1

Boostrap genera esto usando el borde CSS:

.dropdown-toggle:after {
  border: none;
}

1

Si desea exactamente solo en esta clase de botón de arranque, haga:

.btn .dropdown-toggle::after {
    display:none;
}

0

¿Has probado tag = "a" dentro de la clase? esconde la flecha sin más css.


-1

Agregar sin flecha a la declaración de clase de alternancia desplegable


-2

Esto funciona en bootsrap4 y ng-bootstrap.

.dropdown-toggle:after {
    display: none;
}

3
Copiando la respuesta aceptada del niño de dos años, pero con un error tipográfico.
miken32
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.