下拉菜单上的引导程序 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.

如何使用引导程序 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.

推荐答案

您需要在 dropdown-menu 中添加 :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 演示

.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 三角形的动画

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