如何更改 Bootstrap 弹出框箭头的颜色？

Question

在尝试更改弹出框箭头的颜色时，我尝试了一些在网上找到的解决方案。这是我的 CSS，它在一个自己创建的 popover.css 文件中（这里的其他 css 工作正常）。

popover.bottom .arrow::after {
    border-bottom-color: black !important;
}

这是 DOM 中应用的样式

Answer 1

不确定您使用的 bootstrap 是哪个版本，但看起来您的选择器不太正确。这适用于 4.0 版（基于此处的示例：https://getbootstrap.com/docs/4.0/components/popovers/）：

.arrow::after, .bs-popover-bottom .arrow::after {
    border-bottom-color: black !important;
}

Answer 2

对于Bootstrap5，使用这个：

.popover .popover-arrow::before, .popover .popover-arrow::after {
    border-color: #FFA500 !important;  /* this example changes the arrow to orange color... You can always replace with any color you choose. */
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

请注意，在写作结束时，bootstrap 5 处于 alpha 阶段。这可能适用于也可能不适用于 bootstrap 5 的稳定版本。然而，我怀疑源代码是否会从这一点开始发生任何变化。 • 所以这应该很漂亮Bootstrap 5.

稳定版的标准

您可以将上述代码保存在单独的 css 文件中（比如 custom.css），然后 link 将其保存到 <head></head> 中的 HTML 文件中部分...希望这可以帮助那里的人。

如何更改 Bootstrap 弹出框箭头的颜色？

How can I change the color of Bootstrap popover arrows?

css

twitter-bootstrap

popover