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

Question

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

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

这是在 DOM 中应用的样式

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

部分中的

<head></head>

文件...希望这对那里的人有帮助。

Answer 2

不确定您使用的引导程序版本是什么，但看起来您的选择器不太正确。这对我的 4.0 版本有效（基于此处的示例：https://getbootstrap.com/docs/4.0/components/popovers/）：

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

Answer 3

对于 Bootstrap 5.1，我必须使用以下内容来获得

blue

背景（更改为您喜欢的颜色）：

    <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>

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

问题描述投票：0回答：3

3个回答

最新问题

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

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3