如何删除 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>

原文由 Hongbo Miao 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 İlter Kağan Öcal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 css，你可以这样做：

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

原文由 Clyff 发布，翻译遵循 CC BY-SA 4.0 许可协议