Question

在bootstrap 2中，下拉菜单中有一个向上箭头，可以看到here （我不是在谈论卡雷特）。现在使用bootstrap 3或最新的git，这个箭头不存在于我的简单示例中，也不存在于bootstrap主页的examples中。

如何使用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：准确地说，图片可以在another 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: '';
}

困惑如何？ See here for an animation that explains css triangles

Answer 2

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

.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中引入的，而不是用于导航栏的右拉。

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

}

依旧......

Answer 4

这是基于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;
}

下拉菜单上的bootstrap 3箭头

4 个答案: