如何在Bootstrap 4中删除下拉菜单中的箭头？

提问者：小点点

如何在Bootstrap 4中删除下拉菜单中的箭头？

我正在使用Bootstrap 4。我试图删除下拉列表中的箭头。

我为 Bootstrap 3 找到的答案不再有效。

jsfiddle在这里。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

共3个答案

匿名用户

只需从元素中删除“dropdown-toggle”类。如果您有data-toggle属性，下拉列表仍然有效，如下所示

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

重写. dropdown-toggle类样式会影响所有下拉列表，您可能希望将箭头保留在其他按钮中，这就是为什么在我看来这是最简单的解决方案。

编辑:如果希望保留边框样式，请保留< code>dropdown类

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

匿名用户

使用css，您可以这样做：

.dropdown-toggle::after {
    display:none;
}

匿名用户

我不推荐任何现有的答案，因为：

> < li>

。dropdown-toggle的样式不仅仅是插入符号。从元素中移除类会导致样式问题。

覆盖< code >。下拉-切换没有意义。仅仅因为您不需要某个特定元素上的插入符号，并不意味着您以后也不需要。

：：After 不涵盖下拉变体（有些使用：：before）。

在与＜code＞相同的元素中使用自定义＜code＞.脱脱符号＜/code＞。下拉切换＜/code＜元素：

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

有些人说他们需要添加！重要的但是YMMV。