表单字段间距必须由父容器统一承载，禁止在子控件上直接添加mb/me类；垂直表单用mb-控制字段单元间距，水平表单用gy-作用于.row控制label与控件间间隙；响应式需显式声明gy-0 gy-md-3 gy-lg-4完整断点链。
表单字段间距必须由父容器统一承载，不能分散到每个控件上
直接给 <input> 或 <label></label> 加 mb-2、me-3 会导致间距累加和视觉错位——因为 <input type="checkbox"> 和 <input type="text"> 默认行高、垂直对齐方式不同，强行套用相同 spacing 类会拉歪基线。更关键的是，如果父级 <div class="mb-3"> 已有底部间距，子控件再加 <code>mb-2，实际就是 1rem + 0.5rem = 1.5rem，完全脱离设计预期。
正确做法是只让字段容器（即每个 <div class="mb-3">）承担间距责任，所有控件只保留 <code>form-control（或对应类），不加任何 mt/mb/me 类。
<div class="mb-3"> 是间距的唯一载体，它定义了“一个字段单元”的高度节奏<li> <code><label class="form-label"></label>和<input class="form-control">都不设 margin/padding 工具类- 最后的提交按钮用
<div class="mb-0"> 显式收尾，避免多余空白<h3>水平表单要用 <code>gy-控制 label 与控件的垂直对齐间隙在
form-horizontal场景下，mb-*不再适用——因为 label 和控件是同行排列，需要的是它们之间的上下留白，而非字段单元之间的垂直距离。此时应把gy-2加在包裹两者的.row上，它会通过--bs-gutter-y触发.row的负 margin-top/bottom 与.col的 padding-top/bottom 配对，确保 label 文字和 input 框在视觉上呼吸均匀。常见错误是用
mt-2给 label、mb-2给 input，结果两者外边距叠加，且在缩放或打印时容易错行。立即学习“前端免费学习笔记（深入）”；
-
gy-2必须写在<div class="row gy-2"> 上，加在 <code>.col或form-control上无效 -
gy-2对应--bs-gutter-y: 0.5rem，比mb-2（0.5rem）数值一致但机制更稳定 - 若需紧凑布局，改用
gy-1；宽松则用gy-3，不要手动写style="margin-top: 6px"
需要非标准值（如 12px）时，优先用内联 CSS 变量而非扩展工具类
Bootstrap 默认 spacing 类只支持 0–5（对应 0, 0.25rem, 0.5rem, 1rem…），无法直接表达 12px 这类像素值。硬凑
mb-3（≈16px）或mb-2（≈8px）会失准。最轻量可控的方式是绕过工具类，直接设置 CSS 变量：<div class="row" style="--bs-gutter-y: 12px"> <div class="col-sm-3"><label class="form-label">姓名</label></div> <div class="col-sm-9"><input class="form-control"></div> </div>
这种写法不依赖 Sass 编译，不污染全局，且能被 JS 动态修改。注意：IE11 不支持 CSS 变量，如需兼容，可加回退：
style="margin-top: 12px; margin-top: calc(var(--bs-gutter-y) * -0.5);"（配合 .row 负 margin 逻辑）。- 不要写
mb-12或gy-12px—— 这些类不存在，浏览器忽略 - 避免用
px-3模拟垂直间隙，它只影响 padding，不修正 .row 的负 margin，易导致列偏移 - 如果全站都要统一为 12px 垂直 gutter，可在项目根作用域覆盖：
:root { --bs-gutter-y: 12px; }
响应式表单间距必须显式声明断点链，不能只写高断点类
想实现“小屏字段紧凑（无垂直间隙）、中屏起拉开（0.75rem）、大屏进一步宽松（1rem）”，不能只写
gy-md-3 gy-lg-4。因为 Bootstrap 默认在所有断点都启用gy-2（0.5rem），gy-md-3只会让 ≥768px 生效，但 xs/sm 下仍沿用默认值。必须显式写出完整断点链：
gy-0 gy-md-3 gy-lg-4。其中gy-0先清掉所有断点的默认垂直 gutter，后续类才真正生效。漏掉gy-0，小屏下依然有 0.5rem 间隙，和设计稿不符。-
gy-0是响应式 gutter 的起点，不是可选项 - 类顺序无关，但缺一不可；
gy-md-3 gy-0和gy-0 gy-md-3效果一致 - 自定义断点（如
sm: 480px）需确认项目已启用对应类生成，否则gy-sm-2不会编译出 CSS 规则
实际调间距时，最容易被忽略的是：gutter 类只作用于 .row，而表单字段容器（
<div class="mb-3">）根本不是 .row。这意味着，如果你用 <code>mb-3包裹字段，又在外层套了个<div class="row gy-2">，那 <code>gy-2控制的是这个.row和它上下兄弟元素的间隙，和字段内部 label/input 对齐无关——这时候该动的其实是gy-所在的那层.row，而不是字段容器本身。 -
