颠倒的插入

HTML

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

给我一个脱字符号▼ ，但是我想要有一个像▲的脱字符号。

Bootstrap中有这个类吗？ 如果没有，如何做到这一点？

Answer 1

有一个内置的引导类，你可以附加到caret类的父元素

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

更新 ：自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

这对我工作：

 transform: rotate(180deg); 

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

Answer 5

你可以做这样的事情：

在HTML中：

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

在CSS中：

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