Twitter Bootstrap 横向插入符号答案

【问题标题】：Twitter Bootstrap sideways caretTwitter Bootstrap 横向插入符号
【发布时间】：2012-05-31 14:44:30
【问题描述】：

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

我在根菜单项的 a 上使用“插入符号”来向用户显示有更多可用选项，我想在子菜单中使用它的横向版本，在该示例中，他们使用 ->图像，但我认为它与 UI 的其余部分并不完全吻合。

我也试过推特的播放图标，但也不完全匹配。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

使用引导程序 (3.0) Glyphicons

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

【讨论】：

【解决方案4】：

正如 user2661940 所说，您可以在 Bootstrap 3 中使用 glyphicons，或者您也可以为每一面创建自己的类。例如

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案6】：

任何使用 font awesome 的人的另一个选择：

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

【讨论】：

【解决方案7】：

我在 span 中添加了一个旋转类

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

您显然可以根据需要创建其他角度类。

【讨论】：

【解决方案8】：

你可以使用简单的代码：

HTML

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

CSS：

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

【讨论】：

【解决方案9】：

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

【讨论】：