如何在不填充的情况下更改引导弹出框箭头边框颜色？答案

【问题标题】：How to change the bootstrap popover arrow border color without filling it?如何在不填充的情况下更改引导弹出框箭头边框颜色？
【发布时间】：2016-06-24 21:12:26
【问题描述】：

我想更改弹出箭头的边框颜色。当我应用边框颜色时，箭头本身已被颜色填充。

我只想为弹出框主体的箭头边框提供颜色。

<p>Click on button to see Popover</p>

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   data-original-title="Creativity Tuts">pop
</a>

$(function () {
    $('#example').popover();
});

Demo

【问题讨论】：

I want to give only the color to the border of the arrow as in the popover body. .. 我认为stackoverflow.com/a/35909593/4763793 是正确答案

标签： jquery css twitter-bootstrap twitter-bootstrap-3 bootstrap-popover

【解决方案1】：

你改变.popover.right .arrow。因此，更改 .arrow:after 将更改箭头的“填充”颜色，如您所见，我设置为灰色。

.popover.right .arrow {
  border-right-color: aqua;
}

Fiddle

【讨论】：

根据 OP 发布的内容，您的答案是正确的。只有箭头显示颜色。 +1

【解决方案2】：

.popover.right .arrow:after {
  border-right-color: white;
}
.popover.right .arrow {
    border-right-color: red;
}

updated fiddle

【讨论】：