倒置插入符号答案

【问题标题】：Upside down caret倒置插入符号
【发布时间】：2014-01-12 15:30:48
【问题描述】：

HTML

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

切换插入符号类

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

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

【讨论】：

【解决方案2】：

聚会有点晚了，但这就是一个倒置插入符所需要做的一切：

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

【讨论】：

【解决方案3】：

刚刚遇到这个问题，对我来说最好的解决方案是编辑 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;
}

【讨论】：

【解决方案4】：

你可以这样做：

在 HTML 中：

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

在 CSS 中：

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

【讨论】：

【解决方案5】：

假设您想使用类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 字形图标可用作 .caret 及其反转版本的替代品。

正常

<span class="glyphicon glyphicon-triangle-bottom"></span>

反转

<span class="glyphicon glyphicon-triangle-top"></span>

【讨论】：

使用嵌入式“dropup”类（如下 Ron 所述）似乎是首选
当然，使用框架已经提供的东西通常是首选，但在这种情况下，必须使用 2 个 span 元素而不是一个，这可能会使 HTML 代码膨胀。
@TasosK., <span class="caret caret-reversed"></span> css: border:Xpx solid transparent; border-bottom:Xpx solid black; x 任何值..
这在您只想切换插入符号类时非常有用
我认为这个答案的唯一缺点是 css 着色

【解决方案6】：

这对我有用：

transform: rotate(180deg);

【讨论】：

【解决方案7】：

您可以为向上箭头添加新的 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/

【讨论】：

【解决方案8】：

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

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

它适用于引导程序 2 和 3

【讨论】：

我希望他们将其简化为<span class="caret caret-dropup"></span>