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

Question

我正在使用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>

Answer 1

只需从元素中删除"dropdown-toggle"类.如果您具有data-toggle属性,则下拉列表仍然有效,如下所示

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

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

Answer 2

使用css,你可以这样做:

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

Answer 3

我不建议任何现有的答案,因为:

• .dropdown-toggle有更多的造型,而不仅仅是插入符号.从元素中删除类会导致样式问题.

• 覆盖.dropdown-toggle没有意义.仅仅因为你不需要对某个特定元素进行插入,并不意味着你以后就不需要了.

• ::after不包括下拉变体(某些用途::before).

.caret-off改为使用自定义类:

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

Answer 4

删除"dropdown-toggle"类

Answer 5

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

你也可以尝试这个

Answer 6

如果您有兴趣用另一个图标（例如 FontAwesome）替换箭头，您只需要删除 .dropdown-toggle 的伪元素上的边框

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

Answer 7

我在我的项目中使用了很长一段时间的公认答案，但刚刚偶然发现了 bootstrap 使用的一个变量：

$enable-caret: true !default;

如果您将此设置为 false，那么插入符号将被删除，而无需执行任何自定义代码。

我的项目是 Ruby/Rails，所以我使用的是bootstrap-rubygem。我通过在文件/文件之前将custom-variables.scss上述变量设置为 false 来更改变量。application.scss bootstrap.scss