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

Question

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

Answer 1

只需删除dropdown-toggle!

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

Answer 2

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

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

您的按钮将是

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

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

Answer 3

它是在css中完成的.做那样的事情:

.dropdown-toggle:after { content: none }

Answer 4

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

// Your variable overrides
$enable-caret: false

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