如何在Bootstrap 4的插入符号下添加下拉箭头？ [英] How to add dropdown arrow under caret in Bootstrap 4?

问题描述

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

I am using the Bootstrap 4 dropdown option.

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

I wanted to add an up arrow for the dropdown menu in the top left.

在Bootstrap 3中，按钮上有插入符号标记，因此我们可以在下拉菜单中添加箭头。

In Bootstrap 3, we have a caret markup on the button, so we can add the arrow to the dropdown menu.

但是在Bootstrap中4，我们没有插入符号，使用 drop-toggle 类仅添加插入符号。

But in Bootstrap 4, we don't have a caret markup, using the dropdown-toggle class only caret is added.

我们如何在这里的下拉菜单中添加箭头？

How can we add arrow to dropdown menu here?

我添加了Bootstrap 3示例链接：

I added the Bootstrap 3 example link:

https://www.bootply.com/QD8FO89DcY

Bootstrap 4需要相同的功能。

The same functionality is needed in Bootstrap 4.

推荐答案

在Bootstrap 4中，它已被删除，并通过您自己，请查看下面的工作片段，并在其中添加了自定义CSS。

In Bootstrap 4 it has been removed, add that caret/arrow by yourself, please have a look at the below working snippet, where I have added it with a custom 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>

这篇关于如何在Bootstrap 4的插入符号下添加下拉箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！