Question

我使用Twitter布设和一些定制 cs (发现 < a href=>https://stackoverflow.com/a/10143018/351614>>这里 ) 在鼠标上打开下拉菜单。

我使用根菜单项目上的“ caret” 来显示用户有更多的选项, 我想用一个侧面版本来显示子菜单, 例如他们使用一个 - gt; 图像, 但我不认为它与 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

使用靴杆(3.0)

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

Answer 4

As user2661940 said you can use glyphicons for Bootstrap 3 or you can also make your own class for every side. For example

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

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

您可以使用简单的代码:

< 强 > HTML

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

<强度 > CSS:

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

Answer 9

只要添加 cs 就可以在鼠标悬盘上旋转。

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

友情链接