Twitter Bootstrap横向插入

Question

我正在使用Twitter Bootstrap和一些自定义css(在这里找到)在鼠标悬停时打开下拉菜单.

我在根菜单项上使用"插入符号"来向用户显示有更多可用选项,我想对子菜单使用这个横向版本,在该示例中他们使用 - >图像但是我不要认为它真的适合UI的其余部分.

我也尝试过twitter的播放图标,但它也不太匹配.

Answer 1

只需切换边框(参见小提琴):

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 caret-right'></span>

CSS:

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

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

Answer 5

我使用这些样式来做到这一点（它也可以在没有引导程序的情况下工作）

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 6

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

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