如何在Bootstrap 4中控制弹出框箭头的位置

Question

我希望您能帮忙翻译一个关于IT技术的问题，涉及到Bootstrap 4中的popover。我想把toggle按钮设置在右上角。

首先，如果我将popover设置在底部：

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

弹出框将会被显示在屏幕的一部分，如下图所示：

然后我尝试使用“auto”代替“bottom”来进行定位，但是这种情况下弹出框不起作用...

之后，我再次使用了“bottom”来进行定位，并使用偏移量将弹出框向左移动50像素，并增加了弹出框的宽度：

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

但它没有起作用...

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

提前感谢。

- yin

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%;
}

- R.Costa

---

我认为它适用于Bootstrap 3，但我正在使用Bootstrap 4。 - yin

你是对的，yin。我已经更新了我的答案，请看看它是否有效。 - R.Costa

@r-costa抱歉晚来一步，但是通过自定义类或选项单独改变箭头的位置也是可能的吗？ - Max

Answer 2

可能尝试使用Bootstrap 4进行引导弹出框箭头定位的用户，可以使用以下类进行调整箭头位置：

React-Bootstrap v1.0.0-beta.5

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

- Erkka Mutanen

Answer 3

针对Bootstrap 4，以下是我解决此问题的方法。

在JQuery中，您需要监听show.bs.popover事件，示例如下：

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

然后，在该事件内执行更改 Bootstrap .popover 元素的 CSS 代码：

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

不起作用？也许是因为修改代码在元素创建/显示之前触发，所以CSS应用于缺失的元素。尝试将CSS修改代码放入超时中。最终代码将如下所示：

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

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

另一个选项是在你的CSS文件中为.popover元素添加一个带有!important的CSS规则，例如：

.popover { left: 65% !important; }

- Ricardo Green

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);
});

- Suresh Suthar