Bootstrap虽无心理测评专用组件，但可通过form-check-inline实现Likert量表、novalidate+JS完成必答校验、col-md-8 mx-auto优化阅读宽度，并需统一题干语义与选项视觉权重。
Bootstrap 本身不提供心理测评专用组件，但用它的表单控件 + 合理结构 + 少量自定义样式，完全能做出专业、易用、响应式的心理测评表单。关键不是“套模板”，而是控制好题型逻辑、选项对齐、必答校验和移动端体验。
用 form-check 做 Likert 量表题（5点/7点计分）
心理测评里最常见的是 Likert 题项，比如“我经常感到疲惫”后跟“非常不同意 → 非常同意”。Bootstrap 的 form-check 默认横向堆叠，直接用会换行错乱，必须改用 form-check-inline 并手动控制间距。
实操建议：
- 每个题干用
<div class="mb-3"> 包裹，避免上下间距过紧 <li>选项组用 <code><div class="d-flex justify-content-between"> 对齐两端标签（如“1=完全不符合”，“5=完全符合”），中间放 5 个 <code>form-check-inline - 禁用默认的
form-check-input的margin-right，否则小屏下挤在一起；加mx-2统一左右间距 - 别用
name相同的radio—— 心理量表每题必须独立提交，name应带题号，如q3、q7 - 保留
required属性用于基础校验，但隐藏原生提示：给form加novalidate，自己用 JS 拦截submit - 每道题的
<div class="mb-3"> 加 <code>id="q5-group"，对应 radio 的aria-describedby="q5-group"，方便 JS 定位错误题干 - 提交前遍历所有
input[type="radio"][required]，检查其所在name组是否有被选中的——没选中就给题干容器加border-danger并聚焦第一个选项 - 别依赖 CSS 的
:invalid伪类：它只在输入框失焦后才触发，Likert 题目没失焦事件，容易漏判 - 整个
form包在<div class="container"> 内，再嵌一层 <code><div class="row"><div class="col-md-8 mx-auto"> <li>题干文字用 <code>fs-5（Bootstrap 5.3+）或font-size: 1.125rem，比默认fs-4稍小，提升密排舒适度 - 移动端（
xs）去掉左右内边距：px-0，防止内容被截断；但题干mb-2保持不变，确保垂直节奏 - 别用
text-center居中题干：心理量表强调左对齐阅读流，居中反而增加眼动负担
用 aria-describedby 和 required 处理必答题逻辑
心理测评通常不允许跳题，但 Bootstrap 的 required 只校验是否选中，不提示用户哪题漏填。单纯加 required 会导致提交时浏览器弹原生提示（如“请选中一个选项”），体验割裂且无法本地化。
实操建议：
用 col-md-8 mx-auto 控制宽度，避免小屏阅读疲劳
心理测评需要专注力，宽屏下铺满整行（col-12）会让文字行过长，影响阅读节奏；移动端若不做约束，题干和选项会被压缩变形。
实操建议：
最难的不是布局，是题干语义层级和选项视觉权重的一致性——比如所有“程度副词”（“偶尔”“常常”“几乎从不”）要用相同字号和颜色，不能有的加粗有的斜体。这点 Bootstrap 不管，得靠你手动统一 class 或 CSS 变量控制。
