NgbDropdown：删除下拉箭头

Question

我在 Angular 2 应用程序中使用 NgbDropdown 组件。它工作正常，但是我想删除按钮右侧显示的箭头。

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

Dropdown Image

Answer 1

解决方案

只需添加以下CSS样式即可覆盖.dropdown-toggle::after伪元素的默认样式：

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

为什么？

默认情况下 bootstrap 通过 ::after pseudo-element 将箭头添加到下拉组件。

这样做可以将其删除。

这里有一个LIVE DEMO演示。

你是怎么算出来的？

使用 chrome 开发工具，您可以检查元素：

从上面我们可以看出，.dropdown-toggleclass上有一个伪元素::after的样式集。让我们去改变元素的属性吧！为此，我们将 display 属性 更改为 none:

伪元素没有了！！:

Answer 2

添加以下样式覆盖默认样式

.dropdown-toggle::after{
    content:initial
 }

LIVE DEMO

Answer 3

在 Bootstrap 4 中，您可以通过声明 $enable-caret SASS 变量并将其设置为 false:[=16 来删除称为插入符号的下拉箭头=]

$enable-caret: false;

这会覆盖在 Bootstrap 的 _variable.scss:

中设置的默认值 true

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                                true !default;

但请记住，它会完全删除相应的 CSS 样式。因此，如果您不需要全局插入符并希望减少 CSS 有效负载，这是最好的方法。