Question

HTML

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

给我一个插入箭头▼，但我想要一个看起来像▲的插入符号。

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

Answer 1

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

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

Answer 6

刚出现这个问题，对我来说最好的解决方案是编辑bootstrap原创的样式，以便得到我需要的那个。

所以对于每个使用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;
}

颠倒的插入符号

6 个答案: