用 Bootstrap 5 的 list-group 实现评论区最省事，需包裹在 ul 中、用 li.list-group-item，回复嵌套 ul.list-group 并手动加 ms-4 缩进；textarea 用 form-control-sm 和 min-height，按钮用 btn-sm；动态添加用 createElement 而非 innerHTML；移动端 focus 需 setTimeout + select。
评论区结构用 Bootstrap 5 的 list-group 最省事
Bootstrap 5 自带的 list-group 天然适合嵌套评论——它语义清晰、默认无边距、支持层级缩进，比手写 div 堆砌更可靠。别用 card 套 card 做回复，那会快速失控。
关键点：
-
list-group必须包裹在ul中，每个评论用li.list-group-item；回复则用嵌套的ul.list-group放在父li内部 - Bootstrap 5 默认不支持自动缩进，得手动加
ms-4（或ps-4）控制回复层级，每深一层加一次 - 避免用
row/col布局评论主体——文字流会被打断，响应式易错位
form-control 和 btn-sm 配合才能压住输入框高度
评论输入框如果直接套 form-control，在移动端常显得过高、按钮对不齐。原因在于 form-control 默认有上下 padding 和 border-radius，和 btn 的基线不一致。
实操建议：
- 给
textarea加class="form-control form-control-sm"，同时设rows="2"并用style="resize: vertical; min-height: 48px;" - 提交按钮必须用
btn btn-sm btn-outline-primary，不能用btn-md或默认尺寸 - 把输入框和按钮包进
input-group，否则在 Safari 下按钮可能被截断
动态添加回复时，insertAdjacentHTML 比 innerHTML += 安全
很多人用 innerHTML += 拼接新回复 HTML，结果原有事件监听器全丢、已展开的折叠内容重置、甚至触发 XSS（如果用户输入含 <script></script>）。
正确做法是生成纯净 DOM 片段再插入：
- 用
document.createElement('li')创建新项，再用element.classList.add('list-group-item')加类 - 文本内容一律走
textContent，不拼 HTML 字符串 - 插入位置用
parentElement.insertBefore(newItem, referenceElement)或parentElement.append(newItem)，避免重绘整块list-group - 如果必须用字符串模板，只限内部纯文本字段，且对用户名、内容做
textContent转义后再塞入
移动端点击“回复”按钮后，focus() 要加 setTimeout 才生效
在 iOS Safari 和部分安卓 WebView 中，直接调用 textarea.focus() 在点击事件里大概率失效——浏览器还没完成焦点切换的渲染队列。
绕过方法很简单：
- 把
textarea.focus()包进setTimeout(() => { textarea.focus(); }, 0) - 同时加
textarea.select()让光标跳到末尾，否则用户要手动点两次 - 别依赖
autofocus属性，它只在页面加载时起作用 - 如果用了 Bootstrap 的
collapse折叠回复框，确保show类已加上再调用focus，否则元素还没显示就聚焦会失败
实际交互中，最易被忽略的是层级缩进的 CSS 叠加和移动端 focus 时机——这两处一错，整个回复流程就卡住，但错误又不报 JS 异常。
