Caret à l’envers

HTML

 

Donne-moi une flèche , mais je veux avoir un caret qui ressemble à .

Y at-il une classe pour cela disponible dans Bootstrap? Sinon, comment y parvenir?

Il existe une classe bootstrap intégrée que vous pouvez attacher à l’élément parent de la classe caret

    

Cela fonctionne dans les deux bootstrap 2 et 3

Supposons que vous vouliez inverser le caret en utilisant la classe caret-reversed , de manière à conserver l’implémentation existante de la classe caret .

Le CSS serait le suivant.

  .caret.caret-reversed { border-top-width: 0; border-bottom: 4px solid #000000; } 

Cela fonctionne à la fois pour bootstrap 2 et 3.

Mise à jour : Depuis Bootstrap 3.3.2, les .glyphicon-sortingangle-top et .glyphicon-sortingangle-bottom sont disponibles et peuvent servir d’alternative à .caret et à sa version inversée.

Ordinaire

  

Renversé

  

Cela a fonctionné pour moi:

 transform: rotate(180deg); 

Vous pouvez append append une nouvelle classe CSS pour la flèche haut

  

  

Démo http://jsfiddle.net/tbgXj/3/

Vous pouvez faire quelque chose comme ça:

en HTML:

  

en CSS:

 .caret-reversed{ -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 

Juste eu ce problème et la meilleure solution pour moi était d’éditer le style pour l’original de bootstrap donc j’obtiens celui dont j’avais besoin.

Donc, pour tous ceux qui utilisent un bootstrap, voici le contraire:

 .caret-up { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-bottom: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; }