css - 如何删除 Bootstrap 4 下拉列表中的箭头？

Question

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

answers我发现 Bootstrap 3 不再有效。

jsfiddle 是 here .

<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 类样式会影响所有下拉菜单，您可能希望将箭头保留在其他按钮中，这就是为什么在我看来这是最简单的解决方案。

编辑:如果要保留边框样式，请保留 dropdown 类

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