如何在Bootstrap 4的下拉菜单中删除箭头? [英] How to remove the arrow in dropdown in Bootstrap 4?

问题描述

我正在使用Bootstrap4.我试图删除下拉菜单中的箭头.

I am using Bootstrap 4. I tried to remove the arrow in dropdown.

答案我发现Bootstrap 3无法再使用了.

The answers I found for Bootstrap 3 do not work any more.

jsfiddle是此处.

The jsfiddle is 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>

推荐答案

只需从元素中删除"dropdown-toggle"类.如果您具有如下所示的data-toggle属性，则该下拉列表仍将起作用

Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows

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

覆盖.dropdown-toggle类样式会影响所有下拉菜单，您可能希望将箭头保留在其他按钮中，这就是为什么这是我认为最简单的解决方案的原因.

overriding .dropdown-toggle class styles affects all dropdowns and you may want to keep the arrow in other buttons, that's why this looks me the simplest solution.

如果要保留边框样式，请保留下拉菜单

Keep dropdown class if you want to keep border styling

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

这篇关于如何在Bootstrap 4的下拉菜单中删除箭头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！