颠倒的插入符号

Question

HTML

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

给我一个插入箭头?,但我想要一个看起来像的插入符号?.

Bootstrap中是否有可用的课程？如果没有,如何实现这一目标？

Answer 1

有一个内置的引导类,您可以将其附加到插入符类的父元素

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

它适用于bootstrap 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;
}

它适用于bootstrap 2和3.

更新:自Bootstrap 3.3.2以来,可以使用.glyphicon-triangle-top和.glyphicon-triangle-bottom字形作为替代.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);
}