html - 如何在 Bootstrap 4 插入符号下添加下拉箭头？

Question

我正在使用 Bootstrap 4 下拉选项。

我想为左上角的下拉菜单添加一个向上箭头。

在 Bootstrap 3 中，我们在按钮上有一个脱字符标记，因此我们可以将箭头添加到下拉菜单。

但是在 Bootstrap 4 中，我们没有插入符号标记，使用 dropdown-toggle 类只添加了插入符号。

我们如何在此处向下拉菜单添加箭头？

我添加了 Bootstrap 3 示例链接:

https://www.bootply.com/QD8FO89DcY

Bootstrap 4 中需要相同的功能。

Answer 1

在 Bootstrap 4 中，它已被删除，请自行添加插入符号/箭头，请查看下面的工作代码段，我在其中添加了自定义 CSS。

.dropdown-menu-arrow {
  top: -25px;
  left: 50%;
  width: 0;
  height: 0;
  position: relative;
}
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-width: 7px 8px;
  border-style: solid;
  border-color: transparent;
  z-index: 1001;
}
.dropdown-menu-arrow:after {
  bottom: -18px;
  right: -8px;
  border-bottom-color: #fff;
}
.dropdown-menu-arrow:before {
  bottom: -17px;
  right: -8px;
  border-bottom-color: rgba(0,0,0,.15);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="btn-group">
  <div class="btn-group">
    <button id="customDropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="customDropdown">
      <span class="dropdown-menu-arrow"></span>
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>