css - Bootstrap 5 Off Canvas 缺少 CSS/JS

Question

我正在尝试在 Canvas 外使用 bootstrap 5。
与插件相关的 css & js 似乎没有包含在框架中。
https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/components/offcanvas/
BS 网站上的 demo 有效；但是，BS 网站上的 github 链接转到 404。
https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/offcanvas.md

Answer 1

Bootstap 5 beta 3(2021 年更新)
Bootstrap 终于引入了 官方 Offcanvas 组件 !来自官方博客...

"..the offcanvas comes with configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the left, right, and bottom of the viewport..."

Bootstrap Offcanvas demo

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    Open Sidebar
</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>

Read more

Bootstap 5 beta 2(原答案)
正如您在 official Bootstrap docs 中看到的那样，Bootstrap 5 beta 中(还)没有 Off-canvas 组件。您引用的 netlify 文档基于较旧的 pre-alpha 版本。
Bootstrap 5 示例确实显示了 实验 Canvas 外布局，但与其他示例一样，它需要额外的自定义 CSS 和 JS，可以是 found here in the Bootstrap GH repo
一旦你包含了额外的 CSS/JS，off-canvas example works as expected .