Вверх тормашками каре

Question

Вверх тормашками каре

HTML

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

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

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

556 6

html css twitter-bootstrap

6 ответов:

Comments

Ничего не найдено.

Ron · Accepted Answer · 2014-05-24 12:36:23

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

 

он работает как в bootstrap 2 и 3

Tasos K. · Accepted Answer · 2015-12-29 16:39:43

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

CSS-код будет выглядеть следующим образом.
 

.caret.caret-reversed {
 border-top-width: 0;
 border-bottom: 4px solid #000000;
}
он работает как для bootstrap 2 и 3.

обновление: начиная с Bootstrap 3.3.2 the .glyphicon-triangle-top и .glyphicon-triangle-bottom технологии glyphicons, которые могут работать в качестве альтернативы .caret и его обратная версия.

нормальный

отменено

andrey · Accepted Answer · 2015-08-02 17:40:17

это сработало для меня:
transform: rotate(180deg);

Girish · Accepted Answer · 2015-01-23 08:56:35

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

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

tjvg1991 · Accepted Answer · 2016-03-16 04:14:23

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

в HTML:

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

Mors · Accepted Answer · 2017-12-25 05:21:56

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

поэтому для всех, кто использует 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;
}