bootstrap - 更改弹出框箭头颜色

Question

我一直在尝试更改 bootstrap 弹出框的箭头颜色，但不管大家怎么说，它都不会改变。

这是我的资料：

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

我也试过：

.popover.top > .arrow:after{
    border-top-color: lightblue;
}

如果这有很大的不同。

提前感谢您的帮助！

Answer 1

我认为您的自定义 css 已被默认 bootstrap css 文件覆盖。尝试像这样在 lightblue 之后添加 !important，看看是否有帮助：

.popover.top > .arrow:after {
    border-top-color: lightblue !imporant;
}

如果是，那么您需要将自定义 css 文件移动到 BELOW 您的 bootstrap css 文件，这样您就可以避免!important 标签。

<link rel="stylesheet" type="text/css" href="bootstrap.css"> <<-- ADD THIS FIRST
<link rel="stylesheet" type="text/css" href="customStyle.css"> <<-- THEN ADD THIS

bootstrap - 更改弹出框箭头颜色

bootstrap - change popover arrow color

twitter-bootstrap

asp.net-mvc-5.2