58

在 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文章中看到。

4

4 回答 4

161

您需要将 :after 和 :before css 规则添加到您的dropdown-menu. 这些规则取自 Bootstrap 2,是在下拉菜单上方绘制三角形的原因。

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 三角形的动画,请参见此处

于 2013-11-14T17:21:25.383 回答
18

只是为了跟进这一点 - 如果您希望箭头正确定位自身(例如在右对齐的导航栏元素上使用它时,您需要以下附加 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。

于 2014-03-28T18:32:23.843 回答
3

Alexander Mistakidis 提供的 CSS 是正确的。也就是说,它会在 Bootstrap 的下拉菜单顶部创建箭头。为了在响应式视图中正确定位 (@user2993108),您可以在不同的媒体查询或断点处更改left每个类选择器 ( .dropdown-menu:before, ) 的属性。.dropdown-menu:after

例如...

@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 */
  ...
}

}

等等...

于 2014-04-15T20:15:16.270 回答
2

这建立在 Alexander Mistakidis 和 Joyrex 的工作之上,以支持可选箭头和下拉菜单。就我而言,我不想在所有下拉菜单上都有一个箭头,只有一些。

这样,您将arrow类添加到dropdown-menu元素以获取箭头。如果 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;
}
于 2016-02-26T00:12:33.170 回答