Перевернутая каретка

Ответ 1

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

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

Он работает как в бутстрапах 2, так и в 3

Ответ 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.

Обновить. Поскольку Bootstrap 3.3.2 доступны глификоны .glyphicon-triangle-top и .glyphicon-triangle-bottom, которые могут работать как альтернативы .caret и его обратная версия.

Normal

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

Обратный

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

Ответ 3

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

transform: rotate(180deg);

Ответ 4

Вы можете добавить новый класс 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>

Демо http://jsfiddle.net/tbgXj/3/

Ответ 5

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

в HTML:

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

в CSS:

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

Ответ 6

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

Итак, для всех, кто использует bootstrap, здесь все наоборот:

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