Twitter Bootstrap 侧向小三角符号

Question

我正在使用Twitter Bootstrap和一些自定义的CSS（在这里找到）来实现鼠标悬停时下拉菜单的打开。

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

我也尝试了Twitter所使用的播放图标，但它也不太匹配。

- Daniel Powell

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

- ScottS

Answer 2

我会通过添加一个类来修改边框样式，这样你就可以通过添加/删除修改类来切换向右或向下的插入符号。请看以下HTML代码:

```html

我通过添加一个简单修改边框样式的类来实现。这样，只需通过添加/删除该修改类即可切换向右或向下的插入符。

HTML:

```

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

CSS：

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

- Ben Thielker

Answer 3

使用bootstrap（3.0）的Glyphicons。

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

- user2661940

Answer 4

对于使用Font Awesome的任何人，另一个选择是：

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

- mahi-man

Answer 5

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

- 2low4

Answer 6

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

HTML：

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

- bbc_danang

Answer 7

我给这个 span 元素添加了一个旋转的 class。

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

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

- DesJ

Answer 8

你可以使用简单的代码： HTML

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

CSS：

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

- Shahzab Asif

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

- Tariq Javed