解决bootstrap popover首次显示位置有偏差的问题

最新推荐文章于 2025-05-07 18:15:06 发布

原创最新推荐文章于 2025-05-07 18:15:06 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

html 专栏收录该内容

13 篇文章

订阅专栏

在使用Bootstrap Popover时遇到初次显示位置不准确的问题，表现为弹框小三角未对准按钮中间。但再次打开时，位置恢复正常。通过检查代码并参考官网示例，发现在'shown.bs.popover'事件中添加特定调整代码可以解决该问题，从而确保popover始终显示正确。

在使用bootstrap popover发现弹框首次显示的位置和再次显示时位置不同。如下这次首次显示的位置（弹窗的小三角并未在按钮的中间）

再次打开如下图，位置正确木有问题。

代码如下图

$("#esymbol").popover({
        html: true,
        content: $("#esymbol_lib"),
        placement: 'right',
        container: 'body'
    });
$('#esymbol').on('shown.bs.popover', function () {
        if ($("#esymbol-pills-tab").children().length == 1) {
            _this.initESymbollib();
        }
        $("#esymbol_lib").css("display", "flex");
 })

木有任何问题啊。终于发现官网有个

试一下吧，在'shown.bs.popover'的函数中加上一句

 $('#esymbol').on('shown.bs.popover', function () {
        if ($("#esymbol-pills-tab").children().length == 1) {
            _this.initESymbollib();
        }
        $("#esymbol_lib").css("display", "flex");
        $('#esymbol').popover('update');
    })

问题解决。哈哈哈