web-dev-qa-db-fra.com

Comment supprimer la flèche dans la liste déroulante dans Bootstrap 4?

J'utilise Bootstrap 4. J'ai essayé de supprimer la flèche dans la liste déroulante.

Les réponses que j'ai trouvées pour Bootstrap 3 ne fonctionnent plus.

Le jsfiddle est ici .

<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>
csstwitter-bootstraptwitter-bootstrap-4
60
Hongbo Miao

Avec css, vous pouvez simplement faire ça:

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

Supprimez simplement la classe "dropdown-toggle" de l'élément. La liste déroulante fonctionnera toujours si vous avez l'attribut data-toggle comme suit

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

le remplacement des styles de classe .dropdown-toggle affecte toutes les listes déroulantes et vous pouvez conserver la flèche dans les autres boutons. C’est pourquoi cela me semble la solution la plus simple. 

81
iko

Je ne recommande aucune des réponses existantes pour les raisons suivantes:

  • .dropdown-toggle a plus de style que juste le curseur. Supprimer la classe de l'élément provoque des problèmes de style .

  • Remplacer .dropdown-toggle n'a pas de sens. Ce n’est pas parce que vous n’avez pas besoin d’un signe inséré sur un élément en particulier que vous n’en aurez pas besoin plus tard.

  • ::after ne couvre pas variantes de liste déroulante (certains utilisent ::before).

Utilisez plutôt une classe .caret-off personnalisée:

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

supprime la classe "dropdown-toggle"

7
Abdullah Alkurdi

J'utilisais la réponse acceptée pendant un bon bout de temps dans mon projet mais je suis tombé sur une variable variable utilisée par bootstrap :

$enable-caret: true !default;

Si vous définissez ceci sur false, le curseur sera supprimé sans avoir à créer de code personnalisé.

Mon projet était Ruby/Rails, donc j’utilisais le bootstrap-rubygem . J'ai changé la variable en important un custom-variables.scss avec la variable ci-dessus définie sur false dans mon application.scssAVANT le/les fichier (s) bootstrap.scss.

3
bensmithbwd

Si vous souhaitez remplacer la flèche par une autre icône (telle que FontAwesome), il vous suffira de supprimer la bordure du pseudo-élément de.

.dropdown-toggle::after { border: none; }
3
Logan Franklin

Si vous supprimez l’adaptation de la classe de menu déroulant comme indiqué ci-dessous, tous les boutons de menu déroulant de votre système n’auront plus le curseur.

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

Mais peut-être que ce n'est pas ce que vous voulez, alors pour supprimer seulement le bouton spécifique, nous allons insérer une classe appelée: remoecaret, et nous ajusterons la classe: dropdown-toggle comme suit:

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

et notre html ressemble à quelque chose comme:

<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>
0
krekto

Bootstrap génère ceci en utilisant la bordure CSS:

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