下拉菜单上的bootstrap 3箭头

Question

在bootstrap 2中,下拉菜单中有一个向上的箭头,因为它可以在这里看到 (我不是在谈论carret).现在使用bootstrap 3或最新的git,这个箭头不存在于我的简单示例中,也不存在于bootstrap主页的示例中.

如何使用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文章中看到.

Answer 1

你需要在你的css规则之后添加:after和:之前dropdown-menu.这些规则取自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, 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三角形的动画

Answer 2

只是为了跟进这个 - 如果你想让箭头正确定位(就像在右对齐的导航栏元素上使用它一样,你需要以下额外的CSS来确保箭头右对齐:

.navbar .navbar-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.navbar-right:before {
    right: 12px; left: auto;
}

.navbar .navbar-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.navbar-right:after {
    right: 13px; left: auto;
}

请注意"navbar-right" - 这是在BS3中引入的,而不是用于导航栏的右拉.