Twitter Bootstrap sideways caret

Question

我使用Twitter Bootstrap和一些自定义css（找到here）在mouseover上打开下拉菜单。

我在根菜单项上使用“插入符号”来显示用户有更多选项可用，我想使用这个子菜单的横向版本，在那个例子中他们使用了 - >图像，但我不认为它真的适合其余的用户界面。

我也尝试了twitter图标，但它不完全匹配。

Answer 1

就切换了边界（see fiddle）：

HTML

<b class="caret-right"></b> 

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

Answer 2

你可以使用简单的代码：

HTML

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

CSS：

.caret{ 
border-color:#ffffff transparent transparent transparent; 
border-width:4px; 
border-style:solid; 
content: "" 
display:inline-block; 
} 

Answer 3

用bootstrap（3.0）Glyphicons

<span class="glyphicon glyphicon-chevron-up"></span> <!-- UP --> 
<span class="glyphicon glyphicon-chevron-down"></span> <!-- DOWN--> 

Answer 4

正如user2661940说，你可以使用glyphicons自举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; 
} 

Answer 5

我通过增加一类简单的修改边框样式插入符号指向正确的做到这一点。这样，您可以通过添加/删除修改类来正确/减少插入符号。

HTML：

<span class='caret caret-right'></span> 

CSS：

.caret-right { 
    border-left: 4px solid; 
    border-bottom: 4px solid transparent; 
    border-top: 4px solid transparent; 
} 

Answer 6

我使用这些样式来做到这一点（它的工作原理没有引导为好）

HTML：

<span class="caret up"></span> 
<span class="caret right"></span> 
<span class="caret down"></span> 
<span class="caret left"></span> 

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

Answer 7

我加了旋转类跨度

HTML：

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

CSS：

.rotate270 { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 

可以很明显的创建其他角类作为期望。

Answer 8

只需添加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; 
} 

Answer 9

另一种选择使用字体真棒人：

<i class="fa fa-caret-right" aria-hidden="true"></i>