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

Question

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

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

以下是 DOM 中应用的样式

Answer 1

对于 Bootstrap 5，请使用：

\n

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

\n

请注意，在撰写本文时，Bootstrap 5 正处于 alpha 阶段。这可能适用于 Bootstrap 5 的稳定版本，也可能不适用于。但是，我怀疑从现在起有关源代码的任何内容都会发生变化。\xe2\x80\xa2所以这应该是 Bootstrap 5 稳定版本的标准。

\n

您可以将上面的代码保存在一个单独的 css 文件中（例如custom.css）并将其链接到HTML该部分中的文件中<head></head>...希望这对那里的人有帮助。

\n