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

mwngjboj 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(3)|浏览(175)

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

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

字符串
下面是在DOM

中应用的样式

twitter-bootstrap

来源：https://stackoverflow.com/questions/54337652/how-can-i-change-the-color-of-bootstrap-popover-arrows

3条答案

按热度按时间

yqyhoc1h1#

对于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>部分...希望这对你有帮助。

赞(0）回复(0）举报 2023-11-15

t3irkdon2#

不知道你使用的是什么版本的bootstrap，但看起来你的选择器不太正确。我在4.0版本上工作（基于这里的例子：https://getbootstrap.com/docs/4.0/components/popovers/）：

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

字符串

赞(0）回复(0）举报 2023-11-15

g52tjvyc3#

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

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

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

3条答案

相关问题

热门标签

最新问答