CSS 如何删除 Bootstrap 4 下拉菜单中的箭头？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38576503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the arrow in dropdown in Bootstrap 4?
提问by Hongbo Miao
I am using Bootstrap 4. I tried to remove the arrow in dropdown.
我正在使用 Bootstrap 4。我试图删除下拉列表中的箭头。
The answersI 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>
回答by ?lter Ka?an ?cal
Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows
只需从元素中删除“下拉切换”类。如果您具有如下所示的 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 类样式会影响所有下拉列表，您可能希望将箭头保留在其他按钮中，这就是为什么这看起来是最简单的解决方案。
Edit: Keep dropdown class if you want to keep border styling
编辑：如果要保留边框样式，请保留下拉类
<button role="button" type="button" class="btn dropdown" data-toggle="dropdown">
Dropdown Without Arrow
</button>
回答by Clyff
With css, you could just do that:
使用 css，你可以这样做：
.dropdown-toggle::after {
display:none;
}
回答by rybo111
I don't recommend any of the existing answers because:
我不推荐任何现有的答案，因为：
.dropdown-togglehas more styling than just the caret. Removing the class from the element causes styling issues.Overriding
.dropdown-toggledoesn't make sense. Just because you don't need a caret on some particular element, doesn't mean you won't need one later.::afterdoesn't cover dropdown variants(some use::before).
.dropdown-toggle有更多的样式，而不仅仅是插入符号。从元素中删除类会导致样式问题。覆盖
.dropdown-toggle没有意义。仅仅因为在某些特定元素上不需要插入符号，并不意味着以后不需要插入符号。::after不包括下拉变体（有些使用::before）。
Use a custom .caret-offclass instead:
改用自定义.caret-off类：
.caret-off::before {
display: none;
}
.caret-off::after {
display: none;
}
回答by Abdullah Alkurdi
remove the "dropdown-toggle" class
删除“下拉切换”类
回答by Logan Franklin
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
如果您有兴趣用另一个图标（例如 FontAwesome）替换箭头，您只需要删除 .dropdown-toggle 的伪元素上的边框
.dropdown-toggle::after { border: none; }
回答by bensmithbwd
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.scsswith the above variable set to false in my application.scssBEFOREthe bootstrap.scssfile/files.
我的项目是 Ruby/Rails，所以我使用的是bootstrap-rubygem。我通过在文件/文件之前将custom-variables.scss上述变量设置为 false 来更改变量。application.scssbootstrap.scss
回答by aceofspades
Boostrap generates this using the CSS border:
Boostrap 使用 CSS 边框生成：
.dropdown-toggle:after {
border: none;
}
回答by krekto
If you remove fit the dropdown-toggle class as below, all the dropdown buttons on your system will no longer have the caret.
如果您删除适合下拉切换类，如下所示，您系统上的所有下拉按钮将不再有插入符号。
.dropdown-toggle::after {
display:none;
}
But maybe that's not what you want, so to remove just the specific button, we're going to insert a class called: remoecaret, and we'll fit the class: dropdown-toggle as follows:
但也许这不是你想要的，所以要删除特定的按钮，我们将插入一个名为：remoecaret 的类，我们将适合类：dropdown-toggle 如下：
.removecaret.dropdown-toggle::after {
display: none;
}
and our html looks something like:
我们的 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> Edit</a></li>
</ul>
</div>
回答by S. zbr
If you wanna exactly only in this bootstrap button class, make:
如果您只想在此引导按钮类中使用，请执行以下操作：
.btn .dropdown-toggle::after {
display:none;
}
回答by jerryurenaa
have you tried tag="a" within the class? it hides the arrow without further css.
你在课堂上试过 tag="a" 吗？它隐藏了箭头而无需进一步的 css。
