时间戳

首页 > 解决方案 > 添加更多内容时，Bootstrap 5 弹出窗口失败

bootstrap-5 - 添加更多内容时，Bootstrap 5 弹出窗口失败

问题描述

当我将文件缩减为以下内容时，我的弹出框按预期工作：

HTML

<html>
<head>
    <link rel="stylesheet" href="path/to/bootswatch/file.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <button 
        class="testButton" 
        data-bs-toggle="popover" 
        data-bs-placement="top"
        title="Some title"
        data-bs-content="Some content">
            My Test Button
    </button>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

CSS（所以我的弹出框顶部有空间）

.testButton {
    margin-top: 200px;
}

其中大部分是从我在网上找到的文档中复制的。但是，当我在按钮下添加足够的内容时，它会消失：

    <button 
        class="testButton" 
        data-bs-toggle="popover" 
        data-bs-placement="top"
        title="Some title"
        data-bs-content="Some content">
            My Test Button
    </button>

    <h1>Lorem........</h1>
    <h1>Lorem........</h1>
    <h1>Lorem........</h1>
    <h1>Lorem........</h1>
    <h1>Lorem........</h1>
    <h1>Lorem........</h1>

谁能告诉我这是为什么以及如何解决？

标签： bootstrap-5

解决方案

推荐阅读