Bootstrap 4.6 popover 停止滚动，当元素到达边界时仍然可见答案

【问题标题】：Bootstrap's 4.6 popover stops scrolling and is still visible when element reaches boundariesBootstrap 4.6 popover 停止滚动，当元素到达边界时仍然可见
【发布时间】：2026-02-07 15:55:02
【问题描述】：

我在使用 Bootstrap 4.6 进行弹出框可视化时遇到问题

在这个最小的例子中：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</head>
<body style="background-color: cadetblue; height:1000px">

<header style="height: 100px">

</header>
<section style="overflow-y: auto; height: 500px; background-color: cornsilk;">
    

<div style="height: 1000px" > </div>
<div id="test">
<button type="button" 
    data-placement="top" 
    data-toggle="popover" 
    title="Blah" 
    data-content="Bleh Bleh">Blih</button>
</div>
<script>
$("button").popover({})
</script>
<div style="height: 1000px" > </div>



  
</section>

</body>
</html>

当按钮在滚动中可见时，弹出框会正确显示：

Popover shows ok

但是，如果我滚动并且按钮“通过”“cadetblue”区域的弹出框，而不是保持滚动并最终停止可见，则停留在顶部/底部边界：

Popover stays in the "upper limit" when scrolling the section down

Popover stays in the "lower limit" when scrolling the section up

我试过摆弄container、boundary 和fallbackPlacement 选项，因为类似问题的一些答案表明，但无济于事。从我在这个网站和其他网站上的调查来看，Bootstrap 4.6 中的弹出窗口可视化是一个棘手的问题，但由于这是一个如此简单的问题，我确信我忽略了一些东西。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

我终于找到了一个解决方案，使用 this issue 中的评论。

显然，只要触发弹出框的元素退出其边界，Popper（Bootstrap 用来显示弹出框的库）就会在弹出框上切换属性“x-out-of-boundaries”。

因此，解决方法是添加类似的css规则

        .popover[x-out-of-boundaries]{
            display: none;
        }

当元素不再可见时隐藏弹出框。

【讨论】：