最省事用Accordion组件但需关闭默认折叠动画；需确保row容器、增大触控区域、用JS API控制状态同步，兼顾可点、可读、可预期。
用 accordion 组件最省事，但得关掉默认折叠动画
bootstrap 5 的 accordion 天然支持响应式展开/收起，也自动适配移动端触控，不用自己写媒体查询。但它默认带 css 过渡动画，会在小屏下拖慢交互反馈——尤其当 faq 条目多时，用户点开一个要等半秒才展开，体验变差。
实操建议：
- 在
<div class="accordion">上加data-bs-collapse="false"（Bootstrap 5.3+）或直接删掉data-bs-parent和过渡类collapsing相关样式 - 用
accordion-flush类去掉边框和圆角，视觉更干净，更适合 FAQ 场景 - 别依赖
aria-expanded的自动切换逻辑——手动控制更稳，尤其配合搜索过滤时
col-* 布局在桌面端失效？检查是否漏了 row
很多人把 FAQ 标题和内容直接套 col-md-6，结果桌面端并排失败，还是竖着堆。根本原因是 Bootstrap 的栅格系统强制要求父容器是 row，且 row 必须在 container 或 container-fluid 内部才能生效。
常见错误现象：
- 用
<div class="col-md-6">包着整个accordion-item，但外面没row→ 响应式断点完全不触发 - 在
accordion-body里再嵌一层col→ 内容被压缩变形，因为accordion-body默认有 padding - 想让标题左对齐、图标右对齐，却用
float-end→ 在 Flex 布局下失效，改用ms-auto或text-end
移动端点击区域太小，accordion-button 必须加内边距
Bootstrap 默认的 accordion-button 高度只有 40px 左右，iOS Safari 下手指点不准，容易误触相邻条目。这不是 Bug，是设计时按桌面指针交互设定的。
实操建议：
- 给
.accordion-button加py-3（上下各 1rem），确保最小触控高度 ≥ 48px - 别只加
padding-top—— 按钮文字垂直居中会偏上，统一用py-类 - 如果用了自定义图标（比如
<i class="bi bi-plus"></i>），记得加align-middle，否则和文字基线不对齐 - 避免用
font-size: 0.875rem缩小文字来“腾空间”，小屏阅读负担反而加重
搜索过滤后 accordion-collapse 状态错乱？别靠 DOM 操作硬控
加搜索框后，常有人用 document.querySelectorAll('.accordion-collapse') 批量 hide()，再根据关键词 show()。问题在于：Bootstrap 的 collapse 状态由 aria-expanded、class 和实际 DOM 高度三者共同维护，手动改 class 容易不同步，导致点开无反应或重复展开。
更稳的做法：
- 用 Bootstrap 提供的 JS API：
const collapse = new bootstrap.Collapse(element, { toggle: false })，显式初始化再调collapse.show()/collapse.hide() - 过滤前先遍历所有实例：
bootstrap.Collapse.getInstance(el)?.hide()，避免重复初始化报错 - 别在
input事件里频繁调用 show/hide —— 加个setTimeout防抖，延迟 200ms 再执行 - 搜索无结果时，显示提示语比留空更好，否则用户不确定是没搜到，还是页面卡了
响应式 FAQ 不是堆组件，关键是让每块折叠区域在各种尺寸下都“可点、可读、可预期”。最常被忽略的是触控反馈和状态同步——动画关不关、padding 加不加、JS 实例管不管，这些细节一松动，整个交互就飘了。
