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

Question

我正在尝试在 bootstrap 4.The 切换按钮中使用弹出框，我在右上角设置了它。

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

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

弹出窗口将显示为部分关闭屏幕，如：

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

之后我再次在位置中使用 'bottom' 并使用 offset 将 popover 向左移动 50px 并增加 popover 的宽度：

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

css:

.popover-content{
width: 270px;
}

然后弹窗显示如下：

现在弹出箭头位置放错了位置，我尝试使用 ''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%;
}

Answer 2

可能会尝试 React-Bootstrap v1 使用 Bootstrap 4 引导弹出箭头的用户您可以使用以下方法调整箭头的位置class 定位：

React-Bootstrap v1.0.0-beta.5

.popover .arrow::after,
.popover .arrow::before {
  left: 104px;
}

Answer 3

对于 Bootstrap 4 我是这样计算出来的。

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

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

然后，在该事件中执行 css 更改引导程序代码 .popover 元素：

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

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

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

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

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

.popover { left: 65% !important; }

Answer 4

我喜欢下面的。

$('[data-toggle="popover"]').on('show.bs.popover', function () {
setTimeout(function () {
    $('.popover.fade.show').each(function () {
        var $this = $(this);
        if (!$this.hasClass('left-loaded')) {
            $this.addClass('left-loaded')
            var $left = parseInt($('.arrow', $this).css('left')) + parseInt(25) + "px"; 
           // change 25 as per your need
            $this.find('.arrow').css('left', $left);
        }
    })

}, 100);
});

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

How to control popover-arrow position in bootstrap 4

javascript

twitter-bootstrap

popover

bootstrap-4