Bootstrap: caret avec la tête en bas

Question

mon code html

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

me donne une flèche caret ▼. Je veux que le curseur ressemble à ▲

Existe-t-il une classe disponible dans le bootstrap de Twitter? Si non, comment y arriver ??

Answer 1

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

Answer 2

Supposons que vous souhaitiez inverser le curseur à l'aide de la classe caret-reversed , afin de conserver 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

Answer 3

Je ne suis pas sûr, Twitter fournit bootstrap, mais vous pouvez ajouter une classe supplémentaire, voir ci-dessous

 <style>
 .caretdown {
    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="caretdown"></span>
 

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