Bootstrap折叠菜单需组合collapse（控制显隐）、nav（构建结构）和自定义CSS（控制宽度/定位/动画），子菜单须配data-bs-toggle="collapse"、目标id及collapse类，并用data-bs-parent实现互斥。
折叠菜单需要哪些 Bootstrap 组件基础
Bootstrap 本身不提供“左侧折叠菜单”这种完整交互组件，它只提供 collapse（折叠/展开）、nav（导航）、sidebar（无内置类，需自定义）等基础能力。你得自己组合：用 nav 做菜单结构，用 collapse 控制子菜单显隐，再靠 CSS 定义宽度、定位和过渡效果。
别指望 bootstrap.min.js 加载完就自动有折叠侧边栏——没这回事。必须手动绑定点击事件或使用 data-bs-toggle="collapse" 触发 collapse 行为。
如何让子菜单点击后收起/展开（不跳转、不刷新）
关键在 data-bs-toggle="collapse" 和目标 id 的配对，且子菜单容器必须有 collapse 类（Bootstrap 5 要求），不能只写 show 或漏掉 data-bs-parent（否则多级同时展开）。
- 父级菜单项加
data-bs-toggle="collapse"和data-bs-target="#submenu1" - 子菜单
<ul></ul>加class="collapse"和对应id="submenu1" - 多个同级子菜单要收起互斥，必须给它们的父容器加
data-bs-parent="#sidebar"，且该容器要有id="sidebar" - 别用
href="#"，会触发页面跳顶；改用href="javascript:void(0)"或直接去掉href
<div id="sidebar">
<a class="nav-link" data-bs-toggle="collapse" href="javascript:void(0)" data-bs-target="#users" data-bs-parent="#sidebar">用户管理</a>
<ul id="users" class="collapse">
<li><a href="/users">用户列表</a></li>
</ul>
</div>
折叠/展开时如何控制整个侧边栏宽度变化
Bootstrap 的 collapse 只控制高度，不控制宽度。左侧栏缩成图标状态，是纯 CSS 驱动的：靠一个开关类（如 sidebar-collapsed）切换 width 和子元素 display，再配合 transition 实现动画。
- 主侧边栏容器设初始
width: 250px，加transition: width 0.3s - 添加
sidebar-collapsed类后改为width: 60px - 菜单文字用
span包裹，折叠时设sidebar-collapsed .nav-link span { display: none; } - 图标用
<i></i>或<svg></svg>，始终显示，不依赖文字 - JS 切换类时，别直接操作
style.width，用element.classList.toggle('sidebar-collapsed')
移动端下折叠菜单经常点不开？检查这些硬性条件
常见现象：PC 正常，手机点不动子菜单。根本原因不是 JS 没加载，而是 Bootstrap 的 collapse 依赖 ResizeObserver 和正确触发的点击事件，在某些 WebView 或禁用 JS 的环境会失效。
- 确保引入了完整的 Bootstrap JS（含
util.js和collapse.js），CDN 地址末尾带bundle的才含全部依赖 - 检查是否在
上误加了data-bs-spy="scroll"，它会劫持所有click事件 - 移动端点击区域太小，
.nav-link高度低于 44px 会导致触控不灵敏，加min-height: 44px - 如果用了第三方框架（如 Vue/React），别把
data-bs-toggle写在动态渲染的元素上——DOM 挂载后 Bootstrap 才能初始化，需手动调用new bootstrap.Collapse(...)
最易被忽略的是：折叠菜单的“收缩态”下，图标按钮仍需保持可点击面积，仅靠 <i class="bi bi-list"></i> 不够，得包一层带 padding 的 <button></button> 或 <a></a>，否则手指点不到。
