css - NgbDropdown : remove dropdown arrow

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-toggle类上有一个伪元素::after的样式集。让我们去改变元素的属性吧!为此，我们将 display 属性更改为 none:

伪元素不存在了!!: