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

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>

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>

Con CSS, podrías hacer eso:

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

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

eliminar la clase "dropdown-toggle"

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

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.

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>

Boostrap genera esto usando el borde CSS:

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

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

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

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

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

Esto funciona en bootsrap4 y ng-bootstrap.

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