如何删除 Bootstrap 4 下拉菜单中的箭头？答案

【问题标题】：How to remove the arrow in dropdown in Bootstrap 4?如何删除 Bootstrap 4 下拉菜单中的箭头？
【发布时间】：2016-11-29 07:29:33
【问题描述】：

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

我为 Bootstrap 3 找到的 answers 不再工作了。

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>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-4

【解决方案1】：

删除dropdown-toggle 类

【讨论】：

这更像是一条评论
这就是the accepted answer 在此之前六个月所说的：“只需从元素中删除“dropdown-toggle”类。”

【解决方案2】：

我不推荐任何现有的答案，因为：

.dropdown-toggle 的样式不仅仅是插入符号。从元素中删除类会导致styling issues。
覆盖.dropdown-toggle 没有意义。仅仅因为您不需要某个特定元素上的插入符号，并不意味着您以后不需要插入符号。
::after 不覆盖dropdown variants（有些使用::before）。

在与.dropdown-toggle 元素相同的元素中使用自定义.caret-off：

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

有些人说他们需要添加 !important 但 YMMV。

【讨论】：

最佳答案，我只是为其他人添加一些额外的信息，例如应该与 dropdown-toggle 一起添加此类。
这是一个非常有用的答案 - 尝试了 no-arrow 选项，但没有帮助。
很好的答案。就我而言，我需要添加!important。例如：display: none !important;.
与其他答案相比，这是最好的答案。
@TranAnhMinh 也许是因为您在 Bootstrap 之前包含了自定义 CSS？

【解决方案3】：

只需从元素中删除“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>

【讨论】：

由于某种原因，其他解决方案对我不起作用。我正在运行 Bootstrap 4。这是唯一有效的方法。
这对我来说不太适用。按钮的右侧不再是圆形的。
比使用 !important 编写自定义 CSS 更简单 :)
我对此进行了测试，效果很好！在 FF、Chrome、IE 和 Opera 中进行了测试——即使在带有内置浏览器的移动 android 设备上也没有恼人的箭头——非常感谢先生！注意：不要删除完整的“dropdown-toggle”属性，只需删除“-toggle”属性，这样下拉菜单的样式就不会消失。所以“下拉切换”变成了“下拉”——希望这会有所帮助。
这个非常适用于 v5。谢谢。

【解决方案4】：

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

你也可以试试这个

【讨论】：

【解决方案5】：

你在课堂上尝试过 tag="a" 吗？它隐藏了箭头而无需进一步的 css。

【讨论】：

【解决方案6】：

在下拉切换类声明中添加无箭头

【讨论】：

【解决方案7】：

如果你只想在这个引导按钮类中，请制作：

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

【讨论】：

【解决方案8】：

如果您删除 fit 如下所示的 dropdown-toggle 类，您系统上的所有下拉按钮将不再具有插入符号。

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

但也许这不是您想要的，所以要删除特定按钮，我们将插入一个名为：remoecaret 的类，我们将适合该类：dropdown-toggle，如下所示：

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

我们的 html 看起来像这样：

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>

【讨论】：

【解决方案9】：

Boostrap 使用 CSS 边框生成：

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

【讨论】：

【解决方案10】：

这适用于 bootsrap4 和 ng-bootstrap。

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

【讨论】：

复制两年前接受的答案，但有错字。

【解决方案11】：

使用 css，您可以这样做：

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

【讨论】：

我还必须包含 !important 才能使此自定义 CSS 生效。
如果您使用相同的 CSS，这将影响其他页面中使用的每个下拉菜单。
添加更多前缀以仅禁用按钮箭头，例如：.btn.btn-outline-secondary.dropdown-toggle::after { display:none !important; }

【解决方案12】：

我在我的项目中使用接受的答案已经有一段时间了，但现在偶然发现了variable used by bootstrap：

$enable-caret: true !default;

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

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

【讨论】：

【解决方案13】：

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

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

【讨论】：