从 ngbDropdownToggle 中删除小箭头

Question

如何在 ng-bootstrap 中 remove/hide ngbDropdownToggle 图标右侧的小箭头？

以下示例：https://ng-bootstrap.github.io/#/components/dropdown/examples

我的代码：

<ul class="navbar-nav ml-1">
  <li ngbDropdown class="nav-item">
    <a class="nav-link" ngbDropdownToggle>
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
        <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
      </svg>
    </a>
  </li>
</ul>

谢谢。

Answer 1

首先使用 ngbDropdownToggle 向元素添加自定义 class 或 id。比你可以添加这个 CSS.

.custom-class-or-id:after {
    content: none !important;
}

这将删除 ,auto-added'' 箭头图标。

从 ngbDropdownToggle 中删除小箭头

Remove little arrow from ngbDropdownToggle

ng-bootstrap