如何去掉Bootstrap 4 下拉菜单中的箭头？

Question

我正在使用 Bootstrap 4. 我试图删除下拉列表中的箭头。

我为 Bootstrap 3 找到的 answers 不再有效。

jsfiddle 是 here。

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

Answer 1

使用 css，您可以这样做：

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

Answer 2

如果您有兴趣用另一个图标（例如 FontAwesome）替换箭头，您只需要删除 .dropdown-toggle

的伪元素上的边框

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

Answer 3

只需从元素中删除“dropdown-toggle”class。如果您具有如下 data-toggle 属性，下拉菜单仍然有效

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

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

编辑：如果要保留边框样式，请保留 dropdown class

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

Answer 4

我在我的项目中使用了很长一段时间接受的答案，但现在偶然发现了 variable used by bootstrap:

$enable-caret: true !default;

如果您将此设置为 false，则无需执行任何自定义代码即可删除插入符号。

我的项目是 Ruby/Rails，所以我使用的是 bootstrap-rubygem。我通过在 application.scss BEFORE bootstrap.scss file/files 中导入一个 custom-variables.scss 并将上述变量设置为 false 来更改变量。 =16=]

Answer 5

删除 dropdown-toggle class

Answer 6

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

.dropdown-toggle 的样式不仅仅是插入符号。从元素中删除 class 会导致 .
覆盖 .dropdown-toggle 没有意义。仅仅因为您不需要某个特定元素上的插入符，并不意味着您以后不需要插入符。
::after 不包括 dropdown variants（有些使用 ::before）。

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

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

有人说他们需要添加 !important 但 YMMV。

Answer 7

这适用于 bootsrap4 和 ng-bootstrap。

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

Answer 8

Boostrap 使用 CSS 边框生成：

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

Answer 9

如果您删除适合下拉切换开关 class 如下所示，您系统上的所有下拉按钮将不再有插入符号。

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

但也许这不是您想要的，所以要删除特定按钮，我们将插入一个名为：remoecaret 的 class，我们将适合 class：下拉列表-切换如下：

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

Answer 10

如果您只想在这个 bootstrap 按钮中 class，请制作：

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

Answer 11

将无箭头添加到下拉切换 class 声明

Answer 12

你试过在 class 中使用 tag="a" 吗？它没有进一步 css.

就隐藏了箭头

Answer 13

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

你也可以试试这个

如何去掉Bootstrap 4 下拉菜单中的箭头？

How to remove the arrow in dropdown in Bootstrap 4?

css

twitter-bootstrap

twitter-bootstrap-4