L'accent circonflexe à l'envers

HTML

 <span class="caret"></span> 

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

Y a-t-il une classe pour cela disponible dans Bootstrap? Si non, comment faire?

56
demandé sur Voles 2013-12-24 15:24:47

6 réponses

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

<span class="dropup">
    <span class="caret"></span>
</span>

Cela fonctionne à la fois dans bootstrap 2 et 3

82
répondu Ron 2014-05-24 09:36:23

Supposons que vous voulez inverser le curseur en utilisant la classe caret-reversed, de sorte que vous conserviez l'implémentation existante de la classe caret.

Le CSS serait le suivant.

<span class="caret caret-reversed"></span> 

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

Cela fonctionne à la fois pour bootstrap 2 et 3.

Update : Depuis Bootstrap 3.3.2 Les .glyphicon-triangle-top et .glyphicon-triangle-bottom glyphicons sont disponibles qui peuvent fonctionner comme des alternatives à .caret et sa version inversée.

Normal

<span class="glyphicon glyphicon-triangle-bottom"></span>

Inversé

<span class="glyphicon glyphicon-triangle-top"></span>
67
répondu Tasos K. 2015-12-29 14:39:43

Cela a fonctionné pour moi:

transform: rotate(180deg);
11
répondu andrey 2015-08-02 14:40:17

Vous pouvez ajouter ajouter une nouvelle classe css pour la flèche vers le haut

<style>
 .caret-up{
    border-bottom: 10px solid #000000;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
  }

<span class="caret-up"></span>

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

7
répondu Girish 2015-01-23 06:56:35

Vous pouvez faire quelque chose comme ceci:

En HTML:

<span class="caret caret-reversed"></span>

En CSS:

.caret-reversed{
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
3
répondu tjvg1991 2016-03-16 02:14:23

Juste eu ce problème et la meilleure solution pour moi était d'éditer le style pour bootstrap original afin que j'obtienne celui dont j'avais besoin.

Donc, pour tous ceux qui utilisent 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;
}
0
répondu Mors 2017-12-25 03:21:56