如何删除Bootstrap 4中的下拉箭头？

I am using Bootstrap 4. I tried to remove the arrow in dropdown.

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

The answers I found for Bootstrap 3 do not work any more.

我找到的Bootstrap 3的答案不再适用。

The jsfiddle is here.

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>

10 个解决方案

#1

With css, you could just do that:

使用css，你可以这样做：

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

#2

Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows

只需从元素中删除“dropdown-toggle”类。如果您具有data-toggle属性，则下拉列表仍然有效，如下所示

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

overriding .dropdown-toggle class styles affects all dropdowns and you may want to keep the arrow in other buttons, that's why this looks me the simplest solution.

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

#3

remove the "dropdown-toggle" class

删除“dropdown-toggle”类

#4

I don't recommend any of the existing answers because:

我不建议任何现有的答案，因为：

.dropdown-toggle has more styling than just the caret. Removing the class from the element causes styling issues.

.dropdown-toggle比插入符号具有更多样式。从元素中删除类会导致样式问题。
Overriding .dropdown-toggle doesn't make sense. Just because you don't need a caret on some particular element, doesn't mean you won't need one later.

覆盖.dropdown-toggle没有意义。仅仅因为你不需要对某个特定元素进行插入，并不意味着你以后就不需要了。
::after doesn't cover dropdown variants (some use ::before).

::之后不包括下拉变种（有些使用::之前）。

Use a custom .caret-off class instead:

请改用自定义.caret-off类：

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

#5

I was using the accepted answer for quite a while in my project but just now stumbled across a variable used by bootstrap:

我在我的项目中使用了已接受的答案已经有一段时间了，但是现在偶然发现了bootstrap使用的变量：

$enable-caret: true !default;

If you set this to false then the caret will be removed without having to do any custom code.

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

My project was Ruby/Rails so I was using the bootstrap-rubygem. I changed the variable by importing a custom-variables.scss with the above variable set to false in my application.scss BEFORE the bootstrap.scss file/files.

我的项目是Ruby / Rails所以我使用的是bootstrap-rubygem。我通过在application.scss中导入custom-variables.scss并将上面的变量设置为false来更改变量，然后再使用bootstrap.scss文件/文件。

#6

If you are interested in replacing the arrow with another Icon (such as, FontAwesome) you would just need to remove the border on the pseudo element of .dropdown-toggle

如果您有兴趣用另一个Icon（例如FontAwesome）替换箭头，您只需要删除伪元素.dropdown-toggle上的边框

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

#7

This works on bootsrap4 and ng-bootstrap.

这适用于bootsrap4和ng-bootstrap。

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

#8

Boostrap generates this using the CSS border:

Boostrap使用CSS边框生成此：

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

#9

Oh, I found the way:

哦，我找到了方法：

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

#10

You can do this..

你可以这样做..

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

#1