CSS 我们如何更改引导程序弹出窗口中箭头的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25011758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can we change the color of arrow in the popover of bootstrap?
提问by dpndra
<div class=" affix popover right" id ="one" style="margin-left:8em;margin-top:10em; width:15em;background-color:rgba(228,19,47,0.9);padding:5px;border-radius:10px;">
<div class="arrow" style="margin-top:-45px;"></div>
<center style="padding:20px;"><b>this is the message</b></center>
</div>
This code creates the popover with a arrow how can we change the color of this arrow.
这段代码创建了一个带有箭头的弹出框，我们如何改变这个箭头的颜色。
回答by Manwal
回答by MSC
I found out that you need to override one class for each of the possible positions of the popover. In this example, my "tour" popover has a dark background and white text:
我发现您需要为弹出窗口的每个可能位置覆盖一个类。在这个例子中，我的“tour”popover 有一个黑色的背景和白色的文字：
.popover[class*=tour-] {
background: #434A54;
color: white;
}
/* Needed to have the triangle match the grey background of the popover */
.popover[class*=tour-].top .arrow:after {
border-top-color: #434A54;
}
.popover[class*=tour-].right .arrow:after {
border-right-color: #434A54;
}
.popover[class*=tour-].bottom .arrow:after {
border-bottom-color: #434A54;
}
.popover[class*=tour-].right .arrow:after {
border-left-color: #434A54;
}
回答by jme11
Using a standard popover in Bootstrap 3, as in:
在 Bootstrap 3 中使用标准弹出框，如下所示：
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="this is the message">
Popover on right
</button>
You can add the following cssto your custom rules:
您可以将以下css添加到您的自定义规则中：
.popover {
background-color: red; /*substitute 'red' with your color of choice*/
border-color: red;
}
.popover.right>.arrow:after {
border-right-color: red;
}
.popover-content {
background-color: red;
}
回答by Popeye
[Bootstrap Popover with arrow and background color]
[带有箭头和背景颜色的 Bootstrap Popover]
.popover{
background: #ebd997;
height: 100px;
width: 500px;
}
.popover.top> .arrow:after {
border-top-color: #ebd997;
}回答by Alex Szabó
Not sure on this, but you can try changing
不确定，但您可以尝试更改
<div class="arrow" style="margin-top:-45px;"></div>
to
到
<div class="arrow" style="margin-top:-45px; color: red;"></div>
Hope this helps.
希望这可以帮助。
Regards, Alex
问候，亚历克斯
回答by KimchiMan
In Bootstrap 4,
在 Bootstrap 4 中，
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
border-top-color: yellow; // Any color here
}
回答by raklos
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
border-top-color: $blue; // Any color here
}
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
border-bottom-color: $blue; // Any color here
}
回答by Bilal Mohammed
With using bootstrap 4 popover template
使用 bootstrap 4 popover 模板
template: "<div class=" popover yellow" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>"
.yellow .arrow::after {
border-top-color: black;
border-bottom-color: black;
}
回答by GoodJeans
If your using Angular2/4/5, with NGX-BootstrapI manage to change it with CSS, clickon normal text to popover on top. The others do not work because container="body" is not used. in angularthey create [_nghost-c0] if you use container="body".
如果您使用Angular2/4/5，使用NGX-Bootstrap我设法用 CSS 更改它，单击普通文本以弹出顶部。其他的不起作用，因为没有使用 container="body"。 如果您使用 container="body"，它们会在angular 中创建 [_nghost-c0]。
:host /deep/.popover.top > .arrow:after
{
border-top-color: red;
}
:host/deep/.curvepopover{
border-radius:10px;
border:4px solid red;
}
