bootstrap 5 默认推荐用 offcanvas 而非 collapse 实现小屏侧边栏自动收起，因 collapse 仅显隐切换、缺乏 backdrop、esc 关闭、焦点捕获及触摸支持，而 offcanvas 全面适配无障碍与移动端交互。
侧边栏在小屏下自动收起用 collapse 还是 offcanvas？
bootstrap 5 默认推荐 offcanvas，不是 collapse。因为 collapse 只做显隐切换，不处理定位、遮罩、键盘焦点等交互细节；而 offcanvas 自带 backdrop、esc 关闭、焦点捕获和移动端 touch 支持，更适合侧边个人信息这种需要“临时展开+不打断主内容流”的场景。
- 用
collapse容易漏掉aria-expanded和aria-controls，导致屏幕阅读器不可用 -
offcanvas的data-bs-backdrop="false"可禁用遮罩，适合轻量信息展示（比如只显示头像、昵称、简介） - 若侧边栏需常驻（如后台管理页），直接用
col-md-3+d-none d-md-block更轻量，无需 JS
个人信息块怎么适配不同断点宽度？
别硬写固定像素宽度。Bootstrap 的栅格系统配合 display 工具类就能搞定：小屏时侧边栏占满全宽并隐藏，中屏开始作为左栏固定宽度，大屏可微调内边距和字体大小。
- 小屏（
xs）：用d-none隐藏侧边栏，或用offcanvas触发按钮替代 - 中屏（
md）：侧边栏设为col-md-3，主内容col-md-9，此时offcanvas不激活 - 大屏（
xl）：加px-xl-4或text-lg提升可读性，避免文字挤在一起
示例结构：
<div class="row"> <div class="col-md-3 d-md-block d-none"><!-- 侧边栏 --></div> <div class="col-md-9"><!-- 主内容 --></div> </div>
个人信息卡片用 Card 还是 ListGroup？
纯展示用 card，带操作项（如“编辑资料”“消息”按钮）优先用 list-group。Card 的 card-body 内边距固定，ListGroup 的 list-group-item 更易对齐图标+文字，且 hover/focus 状态语义更清晰。
- 头像+昵称+简介：用
card，搭配text-center和mt-3控制间距 - 包含“邮箱”“加入时间”“最近登录”等字段：用
list-group，每项加list-group-item，右侧用ms-auto推按钮 - 避免嵌套过深：不要在
card里再套card-body→row→col，直接用card-text和small
为什么 offcanvas 在 iOS Safari 上点不动？
常见原因是父容器有 overflow: hidden 或 transform（比如用了 position: fixed 且外层加了动画），导致 iOS Safari 无法触发 touchstart。这不是 Bootstrap bug，是 WebKit 渲染限制。
- 检查
offcanvas的parent是否设置了overflow: hidden—— 特别是用了navbar或自定义滚动容器时 - 临时方案：给
offcanvas的.offcanvas元素加style="touch-action: manipulation;" - 根治法：把
offcanvas移到直接子级，避开任何可能带transform或overflow的祖先节点
这个点容易被忽略——功能在 Chrome 没问题，一上真机就失效，得专门测 iOS。
