Html 颠倒的插入符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20760047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Upside down caret
提问by monda
HTML
HTML
<span class="caret"></span>
Gives me a caret arrow ▼, but I want to have a caret that looks like ▲.
给了我一个插入符号箭头▼，但我想要一个看起来像▲.
Is there any class for this available in Bootstrap? If not, how to achieve this?
Bootstrap 中是否有任何可用的类？如果没有，如何实现？
回答by Ron
There is a built in bootstrap class that you can attach to the parent element of the caret class
有一个内置的引导程序类，您可以将其附加到插入符类的父元素
<span class="dropup">
<span class="caret"></span>
</span>
It works in both bootstrap 2 and 3
它适用于引导程序 2 和 3
回答by Tasos K.
Let's assume that you want to reverse the caret using the class caret-reversed, so that you keep the existing implementation of the caretclass.
假设您想使用 class 反转插入符号caret-reversed，以便保留caret该类的现有实现。
The CSS would be the following.
CSS 如下所示。
<span class="caret caret-reversed"></span>
.caret.caret-reversed {
border-top-width: 0;
border-bottom: 4px solid #000000;
}
It works both for bootstrap 2 and 3.
它适用于引导程序 2 和 3。
Update: Since Bootstrap 3.3.2 the .glyphicon-triangle-topand .glyphicon-triangle-bottomglyphicons are available that can work as alternatives to .caretand its reversed version.
更新：自 Bootstrap 3.3.2 起，.glyphicon-triangle-top和.glyphicon-triangle-bottom字形图标可用，可以替代.caret其反向版本。
Normal
普通的
<span class="glyphicon glyphicon-triangle-bottom"></span>
Reversed
反转
<span class="glyphicon glyphicon-triangle-top"></span>
回答by andrey
This worked for me:
这对我有用：
transform: rotate(180deg);
回答by Girish
You can add add new css class for up arrow
您可以为向上箭头添加添加新的 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>
回答by tjvg1991
You can do something like this:
你可以这样做：
in HTML:
在 HTML 中：
<span class="caret caret-reversed"></span>
in CSS:
在 CSS 中：
.caret-reversed{
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
回答by Mors
Just had this problem and the best solution for me was to edit the styling for bootstrap original so I get the one I needed.
刚刚遇到这个问题，对我来说最好的解决方案是编辑 bootstrap original 的样式，这样我就得到了我需要的样式。
So for everyone that use bootstrap one here is the opposite:
因此，对于使用 bootstrap one 的每个人来说，情况正好相反：
.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;
}
