怎么用Bootstrap制作心理测评表单-Bootstrap教程-PHP中文网

Bootstrap虽无心理测评专用组件，但可通过form-check-inline实现Likert量表、novalidate+JS完成必答校验、col-md-8 mx-auto优化阅读宽度，并需统一题干语义与选项视觉权重。

怎么用bootstrap制作心理测评表单

Bootstrap 本身不提供心理测评专用组件，但用它的表单控件 + 合理结构 + 少量自定义样式，完全能做出专业、易用、响应式的心理测评表单。关键不是“套模板”，而是控制好题型逻辑、选项对齐、必答校验和移动端体验。

用 `form-check` 做 Likert 量表题（5点/7点计分）

心理测评里最常见的是 Likert 题项，比如“我经常感到疲惫”后跟“非常不同意 → 非常同意”。Bootstrap 的 form-check 默认横向堆叠，直接用会换行错乱，必须改用 form-check-inline 并手动控制间距。

实操建议：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

每个题干用 包裹，避免上下间距过紧
选项组用对齐两端标签（如“1=完全不符合”，“5=完全符合”），中间放 5 个 form-check-inline
禁用默认的 form-check-input 的 margin-right，否则小屏下挤在一起；加 mx-2 统一左右间距


别用 name 相同的 radio —— 心理量表每题必须独立提交，name 应带题号，如 q3、q7

用 aria-describedby 和 required 处理必答题逻辑
心理测评通常不允许跳题，但 Bootstrap 的 required 只校验是否选中，不提示用户哪题漏填。单纯加 required 会导致提交时浏览器弹原生提示（如“请选中一个选项”），体验割裂且无法本地化。
实操建议：

保留 required 属性用于基础校验，但隐藏原生提示：给 form 加 novalidate，自己用 JS 拦截 submit

每道题的  加 id="q5-group"，对应 radio 的 aria-describedby="q5-group"，方便 JS 定位错误题干
提交前遍历所有 input[type="radio"][required]，检查其所在 name 组是否有被选中的——没选中就给题干容器加 border-danger 并聚焦第一个选项

别依赖 CSS 的 :invalid 伪类：它只在输入框失焦后才触发，Likert 题目没失焦事件，容易漏判
用 col-md-8 mx-auto 控制宽度，避免小屏阅读疲劳
心理测评需要专注力，宽屏下铺满整行（col-12）会让文字行过长，影响阅读节奏；移动端若不做约束，题干和选项会被压缩变形。
实操建议：
整个 form 包在  内，再嵌一层 
题干文字用 fs-5（Bootstrap 5.3+）或 font-size: 1.125rem，比默认 fs-4 稍小，提升密排舒适度

移动端（xs）去掉左右内边距：px-0，防止内容被截断；但题干 mb-2 保持不变，确保垂直节奏
别用 text-center 居中题干：心理量表强调左对齐阅读流，居中反而增加眼动负担
最难的不是布局，是题干语义层级和选项视觉权重的一致性——比如所有“程度副词”（“偶尔”“常常”“几乎从不”）要用相同字号和颜色，不能有的加粗有的斜体。这点 Bootstrap 不管，得靠你手动统一 class 或 CSS 变量控制。