我正在使用 Bootstrap 4 下拉选项。
我想为左上角的下拉菜单添加一个向上箭头。
在 Bootstrap 3 中，我们在按钮上有一个插入标记，因此我们可以将箭头添加到下拉菜单中。
但在 Bootstrap 4 中，我们没有插入符号标记，使用dropdown-toggle仅添加类插入符。
我们如何在这里向下拉菜单添加箭头？
我添加了 Bootstrap 3 示例链接：
https://www.bootply.com/QD8FO89DcY https://www.bootply.com/QD8FO89DcY
Bootstrap 4 中也需要相同的功能。
在 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
