NgbDropdown:删除下拉箭头

Question

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

<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>

下拉图片

Answer 1

解

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

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

为什么？

默认情况下,bootstrap通过伪元素将箭头添加到下拉组件.::after

这样做会删除它.

这是一个展示它的现场演示.

你是如何解决的？

使用chrome dev工具,您可以检查元素:

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

伪元素不再存在!!:

Answer 2

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

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

现场演示