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>

下拉图片

原文由 JP4 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案

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

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

为什么？

默认情况下，引导程序通过 ::after 伪元素 将箭头添加到下拉组件。

这样做会删除它。

这是一个演示它的 LIVE DEMO 。

你是怎么解决的？

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

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

伪元素不再存在！！：

原文由 cnorthfield 发布，翻译遵循 CC BY-SA 3.0 许可协议