首页 文章

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

提问于
浏览
6

我试图在bootstrap 4中使用popover . 我在右上角设置了切换按钮 .

首先,如果我在buttom上设置popover:

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

弹出窗口将显示屏幕的一部分,如:

enter image description here

然后我尝试在展示位置使用'auto'而不是'bottom',但在这种情况下,popover不起作用...

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

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

CSS:

.popover-content{
width: 270px;
}

然后像这样的popover节目:

enter image description here

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

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

但它不起作用....

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

提前致谢 .

3 回答

  • 0

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

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

    可能尝试使用Bootstrap 4进行引导弹出箭头的React-Bootstrap v1的用户可以使用以下类目标调整箭头的位置:

    React-Bootstrap v1.0.0-beta.5

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

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

    我的答案适用于特定的弹出窗口 . 你可以从这里解决这个问题 .

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

    .popover { left: 65% !important; }
    

相关问题