NgbDropdown：删除下拉箭头答案

【问题标题】：NgbDropdown: remove dropdown arrowNgbDropdown：删除下拉箭头
【发布时间】：2017-08-11 01:00:56
【问题描述】：

我在我的 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

【问题讨论】：

标签： css angular ng-bootstrap angular2-ui-bootstrap

【解决方案1】：

解决方案

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

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

为什么？

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

这样做会删除它。

这是一个 LIVE DEMO 演示。

你是怎么解决的？

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

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

伪元素已经不存在了！！：

【讨论】：

我也必须添加这个类，它仍然在屏幕的底部元素上可见：.dropup .dropdown-toggle::after { display:none; }
@cnorthfield: 先生，您能在我的情况下如何通过条件添加上面的 css，我必须在 ccondtion 为真时隐藏上面？

【解决方案2】：

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

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

LIVE DEMO

【讨论】：

【解决方案3】：

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

$enable-caret: false;

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

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

$enable-caret:                                true !default;

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

【讨论】：