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 dev工具，您可以检查元素：

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

伪元素不再存在!!：

Answer 2

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

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

<强> LIVE DEMO

Answer 3

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

$enable-caret: false;

这将覆盖在Bootstrap的true中设置的_variable.scss的默认值：

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

$enable-caret:                                true !default;

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