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

Question

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

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

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

弹出窗口将与屏幕外的部分一起显示，例如：

然后我尝试在放置中使用“自动”而不是“底部”，但在这种情况下，弹出窗口不起作用……

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

 $('[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');
});

但它不起作用….

有谁知道出现时如何移动箭头位置或隐藏箭头？

提前致谢。

原文由 yin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

引导程序 3

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

引导程序 4

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

原文由 R.Costa 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于 Bootstrap 4，这里是我如何解决这个问题的。

所以在 JQuery 中你监听 show.bs.popover 事件，像这样：

 $('#element-id').on('show.bs.popover', function(){
});

然后，在该事件中，您执行 bootstraps 的 css 更改代码 .popover 元素：

 $('.popover').css('left', '65%');

不起作用？可能是因为更改代码恰好在页面中创建/显示元素之前触发，所以 css 适用于缺失的元素。尝试将 css 更改代码置于超时状态。最终代码如下所示：

 $('#element-id').on('show.bs.popover', function(){
  setTimeout(function(){
    $('.popover').css('left', '65%');
  }, 1);
});

我的回答适用于特定的弹出窗口。我想你可以从这里解决。

另一种选择是使用 --- 为 CSS 文件中的 !important .popover 元素添加 CSS 规则，例如：

 .popover { left: 65% !important; }

原文由 Ricardo Green 发布，翻译遵循 CC BY-SA 4.0 许可协议