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

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

我为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>

只需从元素中删除“ dropdown-toggle”类。如果您具有data-toggle属性，则该下拉列表仍然可以使用，如下所示

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

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

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

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

使用CSS，您可以这样做：

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

我不建议任何现有答案，因为：

• .dropdown-toggle具有更多样式，而不仅仅是插入符号。从元素中删除类会导致样式问题。

• 覆盖.dropdown-toggle没有意义。仅仅因为您不需要在某些特定元素上插入符号，并不意味着您以后将不再需要插入符号。

• ::after不涵盖下拉变体（某些用法::before）。

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

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

删除“下拉切换”类

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

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

我在我的项目中使用了很长时间，但是现在偶然发现了bootstrap使用的变量：

$enable-caret: true !default;

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

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

如果按以下方式删除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>

Boostrap使用CSS边框生成此代码：

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

如果您只想在此引导按钮类中进行操作，请执行以下操作：

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

您在课程中尝试了tag =“ a”吗？它隐藏了箭头而没有进一步的CSS。

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

这适用于bootsrap4和ng-bootstrap。

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