Twitter Bootstrap sideways插入符号 [英] Twitter Bootstrap sideways caret

问题描述

我使用Twitter Bootstrap和一些自定义css（在此处找到）可在鼠标悬停时打开下拉菜单。

我在根菜单项上使用caret来显示用户有更多选项可用，我想使用侧面版本的子菜单，在这个例子中，他们使用 - >图像，但我不认为它真的适合与UI的其余部分。

我也试过

解决方案

只需切换边框（ see fiddle ）：

HTML

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

CSS

< pre class =lang-css prettyprint-override> .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;
}


I'm using Twitter Bootstrap and some custom css (found here) to have dropdown menus open up on mouseover.

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.

I've also tried the play icon twitter has but it doesn't quite match either.

解决方案

Just switch up the borders (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;
}

这篇关于Twitter Bootstrap sideways插入符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！