如何控制引导4中弹出箭头的位置

Question

我试图在引导4中使用popover。我在右上角设置的切换按钮。

首先，如果我在屁股上设置了爆米花：

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

弹出部分显示在屏幕上，如下所示：

​

​

然后我尝试使用“自动”而不是“底部”的位置，但在这种情况下，弹出不工作.

之后，我再次在布局中使用“底部”，并使用偏移量将popover50px移动到左侧，并增加弹出窗口的宽度：

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

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

引导带3

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

引导带4

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

Answer 2

下面是我是如何解决这个问题的。

所以在JQuery中，您可以收听show.bs.popover事件，如下所示：

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

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

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

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

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

我的回答适用于特定的波波夫。我想你可以从这里算出来。

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

.popover { left: 65% !important; }

Answer 3

用户可能会尝试使用引导引导4引导弹出箭头的v1 -您可以通过以下类目标来调整箭头的位置：

React Bootstrap v1.0.0-beta.5

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