bootstrap 5 导航栏默认小屏下折叠，需确保 collapse 容器无 show 类、navbar-toggler 配置正确；点击链接或外部区域收起需手动 js 触发 collapse 实例的 click() 或 hide() 方法，禁用 style 或重复初始化。

点击汉堡按钮才展开导航栏（默认隐藏）

Bootstrap 5 导航栏默认在小屏幕下是「折叠但可点击展开」，不是「完全隐藏」。所谓“点击才显示的隐藏导航”，本质是让 .navbar-collapse 初始状态为收起（不显示），且仅响应 .navbar-toggler 的点击——这其实是 Bootstrap 的默认行为，只要没手动加 show 类就对了。

常见错误是给 #navbarNav（或类似 ID 的 collapse 容器）加了 show 类，导致菜单一进页面就展开；或者误用 collapse 类在错误元素上（比如直接加在 <ul></ul> 上，而非包裹它的 <div>）。 <ul><li>确保 collapse 容器（如 <code><div class="collapse navbar-collapse" id="navbarNav">）**不带 <code>show 类**

.navbar-toggler 必须有 data-bs-toggle="collapse" 和正确匹配的 data-bs-target="#navbarNav"

不要在 collapse 容器上写 style="display: block" 或 JS 直接设 element.style.display——这会绕过 Bootstrap 状态管理，后续 click() 失效

如果用了自定义 JS 初始化 Collapse 实例，请确认没调用 show() 方法

点击导航链接后自动收起（移动端关键体验）

用户点完 .nav-link 后菜单还开着，是移动端最典型的体验断层。Bootstrap 不会自动监听内部链接点击来收起，必须手动干预。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

最安全的做法不是操作 DOM 样式，而是触发原生收起逻辑：

• 监听所有 .nav-link 的 click 事件
• 先判断 document.getElementById('navbarNav')?.classList.contains('show')，避免桌面端误触发
• 只在满足条件时调用 document.querySelector('.navbar-toggler').click() —— 这等价于用户点了一次汉堡图标，能同步 aria-expanded、CSS 类和过渡动画
• 这段 JS **必须放在 Bootstrap JS 加载之后**，推荐塞在