Bootstrap 4 从下拉按钮中删除插入符号答案

【问题标题】：Bootstrap 4 remove caret from dropdown buttonBootstrap 4 从下拉按钮中删除插入符号
【发布时间】：2018-01-09 20:39:23
【问题描述】：

在 Bootstrap 3 中，您可以轻松地从下拉按钮中删除“插入符号”（指向下方的小箭头），但我无法在 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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

只需删除dropdown-toggle！

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

【讨论】：

我认为，这应该是公认的答案。

【解决方案2】：

这是在 css 中完成的。做这样的事情：

.dropdown-toggle:after { content: none }

【讨论】：

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

【解决方案3】：

您可以通过从元素中删除 dropdown-toggle 类来删除 Bootstrap 4 中的插入符号。所以不要这样：

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

您的按钮将是

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

这不会有任何副作用，它仍然可以作为下拉菜单正常运行。

【讨论】：

【解决方案4】：

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

// Your variable overrides
$enable-caret: false

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

【讨论】：