Bootstrap 4 移除下拉按钮的小三角符号

Question

在Bootstrap 3中，您可以轻松地从下拉按钮中删除“caret”（向下指的小箭头），但我无法在Bootstrap 4中找到如何做到这一点，因为他们不再使用<span class="caret"></span>。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

- random_user_0891

Answer 1

只需删除dropdown-toggle即可！

这是一个例子： https://jsfiddle.net/ydnosrLw/

- Achmed Zuzali

---

我认为，这应该是被接受的答案。 - Indika K

Answer 2

这可以使用 CSS 来完成。做法如下：

.dropdown-toggle:after { content: none }

- Alexandre Annic

---

根据您的加载顺序，可能需要在该声明末尾添加!important。 - Selino

Answer 3

你可以通过从元素中删除 dropdown-toggle 类来在 Bootstrap 4 中移除小三角形。因此，改为这样：

<button class="btn btn-outline-secondary dropdown-toggle" ...>

您的按钮将会是：

<button class="btn btn-outline-secondary" ...>

这不会有任何副作用，并且它仍然能够正常地作为下拉菜单运行。

- Mohamed Nagieb

Answer 4

在Bootstrap 4中，您可以通过将$enable-caret sass变量设置为false来删除下拉按钮中的插入符号。但是，在导入Bootstrap sass文件之前，必须设置此变量。

// Your variable overrides
$enable-caret: false

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

- Gaslan