如何才能使我的彩色Bootstrap popover正确渲染？

Question

我在我的应用程序中使用了Bootstrap popover但是在中间有一条白线，我无法摆脱它。它看起来像这样：

以下是我定义popover的方法：

HTML：

<input type="text" name="" value="@product.Quantity" 
data-toggle="popover" title="Contact us" data-placement="top" 
class="input-qty form-control text-center" style="display: block;">

<script>
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover({
            'placement': 'top',
            html: true
        });
    });
</script>

CSS：

.popover {
    background: #ff0000;
}

.popover-title {
    background: #ff0000;
}

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

打字稿：

(<any>$(e.currentTarget).parents('tr').find('.input-qty')).popover('show');

我尝试了什么：

我为css尝试了不同的组合（没有效果），如下所示：

.popover .popover-title {
    background: ff0000;
}

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

我真的不知道还有什么可以尝试 - 还有其他人遇到过这样的事吗？

Answer 1

水平线是bottom-border

中的.popover-title

看看这是否适合你：

.popover-title {
    border-bottom: none;
}

或者，如果您希望线条为特定颜色：

.popover-title {
    border-bottom-color: #00ff00;
}

Answer 2

如果您不想要边框，我可以将边框颜色设置为lplot。 试试这个

?lplot

如果您不想要边框，请尝试使用

red