javascript - 如何在 bootstrap 4 中控制 popover-arrow 的位置

Question

我正在尝试在 bootstrap 4 中使用 popover。我在右上角设置了切换按钮。

首先，如果我在按钮上设置弹出窗口:

    $(function () {
$('[data-toggle="popover"]').popover({
placement: 'bottom'
})

弹出窗口将显示为部分离开屏幕，如:

然后我尝试在展示位置中使用“auto”而不是“bottom”，但在这种情况下，弹出窗口不起作用...

之后，我再次在位置中使用“底部”并使用偏移将弹出窗口向左移动 50 像素并增加弹出窗口的宽度:

$('[data-toggle="popover"]').popover({
placement: 'bottom',
offset: '0 50px'
})

CSS:

.popover-content{
width: 270px;
}    

然后弹窗显示如下:

现在 popover-arrow 位置放错了，我尝试用 ''shown.bs.popover' 事件移动箭头位置，例如:

 $('[data-toggle="popover"]').on('shown.bs.popover', function () {
 $('.popover.bottom .popover-arrow:after').css('right', 50 + 'px');
});

但它不起作用......

有谁知道如何在显示时移动箭头位置或隐藏箭头？

提前致谢。

Answer 1

您可以使用以下样式调整箭头的位置:

Bootstrap 3

.popover.bottom > .arrow {
    margin-left: 50px;
}

Bootstrap 4

.popover.bs-tether-element-attached-top::after,
.popover.bs-tether-element-attached-top::before{
    left: 65%;
}