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

【问题标题】：How can I change the color of Bootstrap popover arrows?如何更改 Bootstrap 弹出箭头的颜色？
【发布时间】：2022-01-26 00:58:03
【问题描述】：

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

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

这是 DOM 中应用的样式

【问题讨论】：

标签： css twitter-bootstrap popover

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

对于 Bootstrap 5，使用这个：

.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，也可能不适用。然而，我怀疑从这一点开始，源代码的任何内容都会发生变化。 • 所以这应该是稳定版本的标准。引导程序 5。

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

【讨论】：

截至 2021 年末，Bootstrap v5.1.1，这是可行的。注意，根据您的环境，您可能必须清除浏览器缓存才能使更改可见。