Bootstrap 5 Off Canvas 缺少 CSS/JS

Question

我正在尝试使用 bootstrap 5 的脱离画布。 与插件关联的css & js 似乎没有包含在框架中。

https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/components/offcanvas/

BS 网站上的演示有效；但是，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 组件！来自官方博客...

"..offcanvas 带有可配置的背景、正文滚动和 放置。 Offcanvas 组件可以放置在左侧、右侧和 视口底部..."

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 示例确实显示了 实验性 画布外布局，但与其他示例一样，它需要额外的自定义 CSS 和 JS，可以是 found here in the Bootstrap GH repo

添加额外的 CSS/JS 后，off-canvas example works as expected。