CSS Twitter Bootstrap 横向插入符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10747267/
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
Twitter Bootstrap sideways caret
提问by Daniel Powell
I'm using Twitter Bootstrap and some custom css (found here) to have dropdown menus open up on mouseover.
我正在使用 Twitter Bootstrap 和一些自定义 css（在这里找到）来在鼠标悬停时打开下拉菜单。
I am using the "caret" on a on the root menu items to show the user there is more options available, I would like to use a sideways version of this for the sub menus, in that example they use a -> image however I don't think it really fits in with the rest of the UI.
我在根菜单项上使用“插入符号”向用户显示有更多可用选项，我想对子菜单使用此版本的横向版本，在该示例中他们使用 -> 图像但是我不要认为它真的适合 UI 的其余部分。
I've also tried the play icon twitter has but it doesn't quite match either.
我也试过 twitter 的播放图标，但它也不完全匹配。
回答by ScottS
Just switch up the borders (see fiddle):
只需切换边界（见小提琴）：
HTML
HTML
<b class="caret-right"></b>
CSS
CSS
.caret-right {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid;
display: inline-block;
height: 0;
opacity: 0.3;
vertical-align: top;
width: 0;
}
回答by Ben Thielker
I do it by adding a class that simply modifies the border styles to point the caret to the right. That way you can toggle a caret right/down by adding/removing the modifying class.
我通过添加一个类来简单地修改边框样式以将插入符号指向右侧。这样你就可以通过添加/删除修改类来向右/向下切换插入符号。
HTML:
HTML：
<span class='caret caret-right'></span>
CSS:
CSS：
.caret-right {
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
回答by user2661940
Use the bootstrap (3.0) Glyphicons
使用引导程序 (3.0) Glyphicons
<span class="glyphicon glyphicon-chevron-up"></span> <!-- UP -->
<span class="glyphicon glyphicon-chevron-down"></span> <!-- DOWN-->
回答by 2low4
As user2661940 said you can use glyphicons for Bootstrap 3 or you can also make your own class for every side. For example
正如 user2661940 所说，您可以为 Bootstrap 3 使用字形，也可以为每一方创建自己的类。例如
.caret-right {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
回答by mahi-man
Another option for anyone using font awesome:
使用字体真棒的人的另一种选择：
<i class="fa fa-caret-right" aria-hidden="true"></i>
回答by bbc_danang
I use these styles to do that (it works without bootstrap as well)
我使用这些样式来做到这一点（它也可以在没有引导程序的情况下工作）
HTML:
HTML：
<span class="caret up"></span>
<span class="caret right"></span>
<span class="caret down"></span>
<span class="caret left"></span>
CSS:
CSS：
.caret {
border: 5px solid transparent;
display: inline-block;
width: 0;
height: 0;
opacity: 0.5;
vertical-align: top;
}
.caret.up {
border-bottom: 5px solid;
}
.caret.right {
border-left: 5px solid;
}
.caret.down {
border-top: 5px solid;
}
.caret.left {
border-right: 5px solid;
}
回答by DesJ
I added a rotation class to the span
我向跨度添加了一个旋转类
HTML:
HTML：
<span class="rotate270 caret"></span>
CSS:
CSS：
.rotate270 {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
You can obviously create other angle classes as desired.
您显然可以根据需要创建其他角度类。
回答by Shahzab Asif
you can use simple code:
您可以使用简单的代码：
HTML
HTML
<span class="caret"></span>
CSS:
CSS：
.caret{
border-color:#ffffff transparent transparent transparent;
border-width:4px;
border-style:solid;
content: ""
display:inline-block;
}
回答by Tariq Javed
Just add the css to rotate the caret on mouse hover
只需添加 css 即可在鼠标悬停时旋转插入符号
.navbar-nav>li>.dropdown-menu{
display:block;
visibility:hidden;
}
.navbar-nav>li:hover>.dropdown-menu{
visibility:visible;
}
.navbar-default .navbar-nav>li:hover>a .caret{
transform:rotate(-90deg);
transition:all 0.3s ease-in-out;
}
