当我尝试单击 offcanvas bootstrap5 中的任何内容时，它会关闭，就像我在 offcanvas 外部单击时一样

Question

当我单击按钮时，画布外弹出窗口，但当我单击它时，它会关闭，就像我在其外部单击时一样

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
   
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
        aria-controls="offcanvasExample">
        Button with data-bs-target
    </button>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>
                Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
                lists, etc.
            </div>
            <div class="dropdown mt-3">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                    data-bs-toggle="dropdown">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

</body>

我什至从官方网站 bootstrap5 复制了确切的代码

这些是结果的图像，第一个图像是按钮，第二个图像是 offcanvas 弹出窗口，但我点击它的那一刻就关闭了

Answer 1

嗨，我遇到了同样的问题，我通过更改画布内容（模态）的位置来解决这个问题。它工作完美

当我尝试单击 offcanvas bootstrap5 中的任何内容时，它会关闭，就像我在 offcanvas 外部单击时一样

问题描述投票：0回答：1

1个回答

最新问题

当我尝试单击 offcanvas bootstrap5 中的任何内容时，它会关闭，就像我在 offcanvas 外部单击时一样

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1