Bootstrap 5 OffCanvas在Navbar仅小屏可用，如何适配桌面端？

问题描述 #

在Bootstrap 5的Navbar中使用OffCanvas组件时，发现它仅在sm及更小的移动端屏幕尺寸下正常工作。需要保持sm屏幕显示汉堡菜单的同时，让OffCanvas在笔记本/桌面端也能正常运行。

解决方案 #

核心问题在于默认的navbar-expand-sm类会让Navbar在sm及以上屏幕尺寸时展开菜单内容，导致汉堡按钮隐藏或OffCanvas触发逻辑冲突。通过以下调整即可实现需求：

• 调整Navbar展开规则：移除navbar-expand-sm类（若需在超大屏才展开菜单，可替换为navbar-expand-xxl），确保汉堡菜单在所有屏幕尺寸下都可见。
• 关联汉堡按钮与OffCanvas：修改汉堡按钮的data-bs-toggle属性为offcanvas，并将data-bs-target指向你的OffCanvas容器ID，让汉堡按钮直接触发OffCanvas。
• 清理冗余结构：如果不需要原有的折叠菜单，可以移除collapse navbar-collapse相关DOM，避免布局混乱。

修改后的完整代码示例 #

<header class="menu">
    <nav class="navbar">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="" class="logo">
            </a>
            <!-- 汉堡按钮改为触发OffCanvas -->
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo" aria-controls="demo" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="d-flex"><span class="icon icon-search"></span></div>
            
            <!-- OffCanvas容器 -->
            <div class="offcanvas offcanvas-top" id="demo">
                <div class="offcanvas-header">
                    <h1 class="offcanvas-title">Heading</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                </div>
                <div class="offcanvas-body">
                    <p>Some text lorem ipsum.</p>
                    <p>Some text lorem ipsum.</p>
                    <p>Some text lorem ipsum.</p>
                    <button class="btn btn-secondary" type="button">A Button</button>
                </div>
            </div>
        </div>
    </nav>
</header>

补充说明 #

如果需要在特定断点以上显示常规菜单、以下用汉堡+OffCanvas，可以保留navbar-expand-*类（比如navbar-expand-md），同时确保OffCanvas的触发按钮在所有断点下都能正常点击；另外检查OffCanvas的z-index和样式，避免在桌面端被其他元素遮挡。

内容的提问来源于stack exchange，提问作者Elaine Byene