我该如何改变Bootstrap弹出框箭头的颜色？

Question

我尝试了一些在线解决方案，试图改变我的弹出框箭头的颜色。这是我的CSS代码，它在一个自己创建的popover.css文件中（其中的其他CSS都可以正常工作）。

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

以下是DOM中应用的样式： 最初的回答。

- d1596

Answer 1

对于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的稳定版本兼容或者不兼容。但是我怀疑从此时起源代码不会有太大的变化。因此，这应该基本上符合Bootstrap 5的稳定版本。

您可以将上述代码保存在单独的CSS文件中（比如说custom.css），然后在标签中链接到您的HTML文件中...希望这对某些人有所帮助。

- Alvindera97

---

截至2021年底，Bootstrap v5.1.1是有效的。请注意，根据您的环境，您可能需要清除浏览器缓存才能看到更改。 - undefined

Answer 2

不确定您使用的是哪个版本的bootstrap，但看起来您的选择器有些问题。在我的4.0版本中可以使用此方法（基于此例子：https://getbootstrap.com/docs/4.0/components/popovers/）：

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

- troyw1636

Answer 3

对于Bootstrap 5.1，我不得不使用以下代码来实现一个蓝色背景（根据您的喜好更改颜色）：

    <style type="text/css">
        .popover {
            background: blue;
        }

        .popover.bs-popover-top .popover-arrow:after {
            border-top-color: blue;
        }

        .popover.bs-popover-end .popover-arrow:after {
            border-right-color: blue;
        }

        .popover.bs-popover-bottom .popover-arrow:after {
            border-bottom-color: blue;
        }

        .popover.bs-popover-start .popover-arrow:after {
            border-left-color: blue;
        }
    </style>

- Martin_W