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

问题描述

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

答案 我发现 Bootstrap 3 不再适用.

jsfiddle 这里.

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">落下<div class="下拉菜单" aria-labelledby="dropdownMenu1"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a>

解决方案

只需删除dropdown-toggle";从元素类.如果你有 data-toggle 属性，下拉菜单仍然有效

没有箭头的下拉菜单

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

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

没有箭头的下拉菜单

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

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

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>

解决方案

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>

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

Edit: 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屋！