倒三角符号

Question

HTML

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

我得到了一个插入符箭头▼，但我想要的是看起来像▲的插入符。

Bootstrap中是否有可用于此的类？如果没有，如何实现？

- monda

Answer 1

有一个内置的 Bootstrap 类可以附加到插入符号类的父元素上。

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

它可以同时在Bootstrap 2和3中使用

- Ron

---

我希望他们把它简化为<span class="caret caret-dropup"></span>。 - Adrian Enriquez

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>

- Tasos K.

---

使用嵌入式的“dropup”类（如Ron所提到的）似乎更受青睐。 - Andrey Mormysh

当然，通常情况下使用框架已经提供的东西是更好的选择，但在这种情况下，需要使用2个span元素而不是一个，这可能会使HTML代码变得更加臃肿。 - Tasos K.

@TasosK.，<span class="caret caret-reversed"></span> css：border:Xpx solid transparent; border-bottom:Xpx solid black; 其中X为任何值。 - yaakov

当您希望仅切换插入符号类时，这非常有用。 - ndd

这个答案唯一的缺点是 CSS 的着色，我认为。 - Taufik Nur Rahmanda

Answer 3

对我来说这个方法很有效:

transform: rotate(180deg);

- andrey

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>

Demo http://jsfiddle.net/tbgXj/3/

- Girish

Answer 5

你可以这样做：

在HTML中：

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

在CSS中：

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

- tjvg1991

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

- Mors

Answer 7

可能有点晚了，但这就是需要做的一切，以获得一个倒置的插入符号：

.menu-item-has-children > .sub-menu > .menu-item-has-children::after {
    content: "\005E";
    transform: rotateX(180deg);
    <!-- and any other styles u want -->
}

- Manoj Kumar

Answer 8

切换插入符号类别

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

.caret.caret-reversed {
    border: 5px solid transparent;
    border-bottom: 5px solid #000000;
}

- Surya R Praveen