bootstrap 3箭头下拉菜单 [英] bootstrap 3 arrow on dropdown menu

问题描述

在引导2中，下拉菜单有一个向上箭头，可以看到此处
（我不是说carret）。现在使用bootstrap 3或最新的git，这个箭头不存在于我的简单例子中，也不在引导主页上的示例中。

In bootstrap 2 the dropdown menu had an upwards arrow as it can be seen here (i am not talking about the carret). Now using bootstrap 3 or latest git this arrow doesn't exist in my simple example bellow nor in the examples on the bootstrap homepage.

如何使用bootstrap 3再次添加此箭头？

How can I add this arrow again using 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：准确来说，图片可以在另一篇 stackoverflow文章。

PS:To be precise the picture can be seen in another stackoverflow article.

推荐答案

您需要在下拉菜单之前添加：after和：before css规则。这些规则来自Bootstrap 2，它们是下拉列表上方的三角形。

You need to add :after and :before css rules to your dropdown-menu. These rules are taken from Bootstrap 2, and are what draw the triangle above the dropdown.

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, 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: '';
}

困惑怎么办？ 查看说明CSS三角形的动画

这篇关于bootstrap 3箭头下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！