Перевернутый каретка

Question

HTML

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

дает мне каретку стрелка ▼, но я хочу иметь каретку, которая выглядит как ▲.

Есть ли класс для этого в Bootstrap? Если нет, как этого добиться?

Answer 1

Там будет построен в начальной загрузки класса, который вы можете прикрепить к родительскому элементу каретка класса

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

Он работает в обоих самонастройки 2 и 3

Answer 2

Предположим, что вы хотите отменить каретку, используя класс caret-reversed, чтобы сохранить существующую реализацию класса caret.

CSS будет следующим.

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

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

Он работает как для начальной загрузки 2 и 3.

Update: Поскольку Bootstrap 3.3.2 .glyphicon-triangle-top и .glyphicon-triangle-bottom glyphicons доступны, которые могут работать в качестве альтернативы .caret и его обратимой версии.

Нормальный

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

Перевернутое

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

Answer 3

Вы можете добавить добавить новый класс CSS для стрелка вверх

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

Demo http://jsfiddle.net/tbgXj/3/

Answer 4

Это работал на меня:

transform: rotate(180deg); 

Answer 5

Вы можете сделать что-то вроде этого:

в HTML:

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

в CSS:

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

Answer 6

Просто имел эту проблему и самое лучшее решение для меня было, чтобы изменить стиль для начальной загрузки оригинала поэтому я получаю тот, который мне нужен.

Таким образом, для всех, которые используют самозагрузки один здесь противоположна:

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