Bootstrap 3下拉菜单箭头

Question

在Bootstrap 2中，下拉菜单有一个向上的箭头，可以在这里看到（我不是在谈论小车）。现在，在使用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文章中看到。

- user2993108

Answer 1

你需要在dropdown-menu中添加: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, 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三角形的动画

- Alexander Mistakidis

---

这不是响应式的，即箭头的位置不正确。 - user2993108

:before和:after都有什么必要性？似乎只用其中一个就可以工作。http://jsfiddle.net/kq5Ef/387/ - mellis481

@im1dermike 看起来你的fiddle两个都有...但是回答你的问题：:before 创建了一个灰色（#ccc）的三角形，而 :after 则创建了一个白色的三角形。灰色的三角形被放在后面，以创建白色三角形周围的边框。 - Alexander Mistakidis

你应该使用 @media (min-width: 768px) {} 包裹代码，以确保箭头不会出现在移动导航栏中。 - Alexey Kosov

@RainMan 只需增加边框的大小并根据需要重新定位顶部/左侧即可。 - Alexander Mistakidis

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 中引入的，用于导航栏而非使用 pull-right。

- Joyrex

Answer 3

亚历山大·米斯塔基迪斯提供的CSS是正确的。也就是说，它可以在Bootstrap中创建下拉菜单顶部的箭头。为了在响应式视图（@user2993108）中正确定位它，您可以在不同的媒体查询或断点处更改每个类选择器（.dropdown-menu:before，.dropdown-menu:after）的left属性。

例如...

@media (max-width: 400px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 30px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 31px; /* change for positioning */
  ...
}

}

@media (max-width: 767px) and (min-width: 401px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 38px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 39px; /* change for positioning */
  ...
}

}

抱歉，我只能用英文进行翻译。

- Dan

Answer 4

这是基于Alexander Mistakidis和Joyrex的工作，支持可选箭头和dropup菜单。在我的情况下，我不想在所有下拉菜单上都有箭头，只想在某些菜单上添加。

使用此功能，您可以向dropdown-menu元素添加arrow类以获取箭头。如果Bootstrap将下拉/上升定位到左侧，则还需要添加arrow-right以将箭头移至另一侧。

// add an arrow to the dropdown menus
.dropdown-menu.arrow:before {
  position: absolute;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: '';
}
.dropdown-menu.arrow:after {
  position: absolute;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
}

// postion at the top for a 'down' menu
.dropdown .dropdown-menu.arrow:before {
  top: -7px;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
}
.dropdown .dropdown-menu.arrow:after {
  top: -6px;
  border-bottom: 6px solid #ffffff;
}

// postion at the bottom for an 'up' menu
.dropup .dropdown-menu.arrow:before {
  bottom: -7px;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0, 0, 0, 0.2);
}
.dropup .dropdown-menu.arrow:after {
  bottom: -6px;
  border-top: 6px solid #ffffff;
}

// support to move the arrow to the right-hand-side
.dropdown-menu.arrow.arrow-right:before,
.dropup .dropdown-menu.arrow.arrow-right:before {
  right: 15px;
  left: auto;
}
.dropdown-menu.arrow.arrow-right:after,
.dropup .dropdown-menu.arrow.arrow-right:after {
  right: 16px;
  left: auto;
}

- Lucas Nelson