css – bootstrap 3箭头下拉菜单

前端之家收集整理的这篇文章主要介绍了css – bootstrap 3箭头下拉菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在引导2下拉菜单有一个向上箭头,它可以看到 here
(我不是在说carret)。现在使用bootstrap 3或最新的git这个箭头不存在我的简单例子下面或在 examples在引导主页上。

如何使用bootstrap 3再次添加这个箭头?

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Menu
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
    </ul>
  </li>

PS:准确地说,图片可以在another stackoverflow文章中看到。

解决方法

您需要添加:after和:before css规则到您的下拉菜单。这些规则取自Bootstrap 2,并且是下拉框上方的三角形。

JSFiddle DEMO

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0,0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

困惑怎么样? See here for an animation that explains css triangles

原文链接:https://www.f2er.com/css/222772.html

猜你在找的CSS相关文章