如何在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

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

---

由于某些原因，其他解决方案对我不起作用。我正在运行Bootstrap 4。这是唯一有效的方法。 - anonymoose

这对我来说并没有完全起作用。按钮的右侧不再是圆角形状了。 - Jace Browning

比使用!important编写自定义CSS更简单 :) - hughjdavey

我测试了一下，它运行得非常好！在FF、Chrome、IE和Opera中进行了测试——甚至在带有内置浏览器的移动Android设备上也没有烦人的箭头——非常感谢您！注意：不要删除完整的“dropdown-toggle”属性，只需删除“-toggle”属性，这样您的下拉菜单样式就不会消失。因此，“dropdown-toggle”变成“dropdown”——希望这可以帮助到您。 - Kerim Yagmurcu

这个在v5上运行得非常好。谢谢。 - Sohan Arafat

Answer 2

使用 CSS，你可以轻松实现这个效果：

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

- Clyff

---

我还需要加上 !important 才能使这个自定义的 CSS 生效。 - Jace Browning

如果您使用相同的CSS，这将影响到其他页面中使用的每个下拉菜单。 - Pavan Nath

为了仅禁用按钮的箭头，请添加一些前缀，例如：.btn.btn-outline-secondary.dropdown-toggle::after { display:none !important; } - puppylpg

Answer 3

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

• .dropdown-toggle的样式超过了小三角形。从元素中删除该类会导致样式问题。

• 覆盖.dropdown-toggle没有意义。仅因为某个特定元素上不需要小三角形并不意味着以后不需要。

• ::after无法覆盖下拉菜单变体(一些使用::before)。

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

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

有些人说他们需要添加 !important，但效果因人而异。

- rybo111

---

最佳答案，我只是想为其他人添加一些额外的信息，比如应该与“dropdown-toggle”一起添加此类。 - eestein

很好的答案。在我的情况下，我需要添加 !important。例如：display: none !important;。 - Tran Anh Minh

与其他答案相比，这是最好的答案。 - enchance

@TranAnhMinh 可能是因为你在 Bootstrap 之前包含了自定义的 CSS？ - rybo111

对于任何需要覆盖的人来说，这是正确的方法。 - Luyang Du

Answer 4

移除 dropdown-toggle 类

- Abdullah Alkurdi

---

可以的，那我会尽力将其翻译成通俗易懂的语言，但不改变原意。需要翻译的内容是：“That's more like a comment。” - mrun

就像这个被接受的答案在这个答案发布六个月前所说的那样："只需从元素中删除“dropdown-toggle”类即可”。 - Wai Ha Lee

Answer 5

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

你也可以尝试这个

- Vennila M

---

这真的很有帮助。它解决了我整个问题！谢谢。 - MUHINDO

Answer 6

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

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

- Logan Franklin

Answer 7

我在我的项目中曾长时间使用接受的答案，但现在刚刚发现了被Bootstrap使用的变量:

$enable-caret: true !default;

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

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

- bensmithbwd

Answer 8

如果您将下拉菜单按钮的类设置为 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>

- krekto

Answer 9

Bootstrap使用CSS边框生成此内容：

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

- aceofspades

Answer 10

如果你只想在这个 Bootstrap 按钮类中精确地进行操作，请执行以下操作：

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

- S. zbr