应使用 list-group-item-action 类并手动管理 active 状态，配合 role="button" 和 tabindex="0" 保障可访问性；服务端需预设 active 类，前端初始化时读取 DOM 状态而非重置。
怎么让 list-group 里的项带点击反馈
默认的 list-group-item 不自带点击态，点上去没视觉变化，用户会怀疑没生效。得手动加交互逻辑，不能只靠 Bootstrap 的 CSS 类。
- 用
list-group-item-action类替代纯list-group-item，它自带 hover/focus/active 样式，且语义上表示“可交互” - 如果绑了 JavaScript 事件（比如
click），记得加role="button"和tabindex="0"，否则键盘用户无法触发 - 别直接给
a标签加href="#"——会跳到页面顶部；改用href="javascript:void(0)"或监听后event.preventDefault()
为什么点击后 active 状态不保留
Bootstrap 的 active 类只是静态样式，不会自动切换。JS 不介入的话，点了就没了，不像原生 radio/checkbox 那样有状态记忆。
- 手动控制：点击时移除所有兄弟节点的
active，再给当前项加上 - 用
data-bs-toggle="list"可以启用内置的 tab 切换逻辑（需引入bootstrap.bundle.js），但仅适用于配合nav或tab-pane场景，单独 list-group 不认这个 data 属性 - 如果用 Vue/React，别硬套 class 切换，优先走响应式数据驱动，避免 DOM 操作和框架状态不同步
如何嵌套按钮或图标而不破坏布局
往 list-group-item 里塞 button 或 svg 容易撑高、错位，尤其在 flex 布局下。
- Bootstrap 5 默认用 flex 布局，
list-group-item是display: flex，内部元素默认垂直居中；加图标时用ms-auto推到右侧，别用float - 按钮要加
btn btn-sm控制尺寸，否则比 item 高；禁用默认边距，用my-0 py-0微调 - 避免在
list-group-item内写多层div包裹内容——会干扰 flex 对齐，优先用span或直接内联元素
服务端渲染时怎么保持选中项同步
如果列表由后端生成（比如 PHP/Java 渲染 HTML），前端 JS 的 active 状态和服务器返回的初始状态可能不一致。
- 服务端应在当前选中项的
li上直接输出class="list-group-item active"，而不是靠 JS 补 - 前端 JS 初始化时，先查 DOM 是否已有
active，再绑定事件，别无脑重置 - 注意 SSR 和 CSR 混合场景：React/Vue hydrate 后，若 JS 重绘 list-group，可能把服务端写的
active干掉——得在组件 mount 后比对 URL 或 state 再设
