在引导程序4中如何移除下拉列表中的箭头？

我正在使用引导程序4。我试图删除下拉列表中的箭头。

我找到的 答案引导3不再工作。

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>
149182 次浏览
小开

使用 css，你可以这样做:

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

如果您有兴趣将箭头替换为另一个图标(例如，FontAwesome) ，您只需删除。下拉开关

.dropdown-toggle::after { border: none; }
小开
最佳答案

只需从元素中删除“ dropdown-toggle”类。如果您有如下 data-toggle属性，下拉框仍然可以工作

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

重写 .dropdown-toggle类样式影响所有下拉列表，你可能想保持箭头在其他按钮，这就是为什么我认为这是最简单的解决方案。

编辑 : 如果想保持边框样式，请保留 dropdown类

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

在我的项目中，我使用这个公认的答案已经有一段时间了，但是现在我偶然发现了一个 引导程序使用的变量:

$enable-caret: true !default;

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

我的项目是 Ruby/Rails，所以我使用的是 Bootstrap-rubygem。我通过导入一个 custom-variables.scss来修改变量，在我的 application.scss 之前 bootstrap.scss文件/文件中将上述变量设置为 false。

小开

删除 dropdown-toggle类

小开

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

  • 除了插入符号，.dropdown-toggle还有更多的样式。从元素中移除类会导致 造型问题。

  • 覆盖 .dropdown-toggle没有意义。仅仅因为您不需要某个特定元素上的插入符号，并不意味着您以后不需要插入符号。

  • ::after不包括 下拉式变体(有些使用 ::before)。

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

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

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

小开

这可以在 bootrap4和 ng-bootstrap 上运行。

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

Boostrap 使用 CSS 边框生成:

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

如果您删除适合下拉式切换类如下，所有的下拉式按钮在您的系统将不再有插入符号。

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

但是这可能不是你想要的，所以为了删除特定的按钮，我们将插入一个类: Remoecaret，我们将适合类: 下拉菜单如下:

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

如果你只想在这个引导按钮类，使:

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

向下拉切换类声明添加无箭头

小开

你在类中试过 tag = “ a”吗? 它隐藏了箭头而没有进一步的 css。

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

你也可以试试这个


提交答案