直接用 Bootstrap 的 mb-2、me-3 类在表单里容易失控，因为控件嵌套在 mb-3 容器中再叠加自身间距会导致累加错位，且不同控件默认样式差异会加剧视觉混乱；应统一由父容器（如 div.mb-3）承载间距责任，控件仅用 form-control 保证尺寸一致，避免子元素重复设 margin 类。
为什么直接用 Bootstrap 的 mb-2、me-3 类在表单里容易失控
因为表单控件（ 更麻烦的是：不同控件类型（如 Bootstrap 的 spacing 工具类本质是 margin/padding 的快捷映射，关键在「谁来承载这个间距」。推荐把间距逻辑收口到表单字段容器层（即每个 示例结构： 立即学习“前端免费学习笔记（深入）”； Bootstrap 默认 spacing 类只提供 两种轻量解法： 当给 正确做法是信任 Bootstrap 表单间距真正难的不是“怎么加类”，而是判断「哪个元素该承担这个间距责任」。一旦把间距逻辑从控件本身上移一层到容器，后续维护、主题切换、响应式调整都会变得可预测。、、）常嵌套在 mb-2，间距会重复累加。比如两个 都加了 mb-2，实际垂直间距是 1rem + 1rem = 2rem，而非预期的 1rem。 和 ）默认行高、对齐方式不同，盲目套用统一 spacing 类会导致视觉错位。form-control 类确保控件自身尺寸一致，再靠父级统一控制间隔 和 上同时加 mb- 类如何用 Bootstrap spacing 类精准控制表单整体密度
mb-3 是 Bootstrap 默认表单字段间距（1rem），适合大多数场景mb-2（0.5rem）；需要宽松呼吸感，用 mb-4（1.5rem）form-horizontal）建议用 mb-2 + me-3 组合控制 label 与控件间距自定义 spacing 值绕过 Bootstrap 默认断点限制
0–5 和 auto（如 mb-6 不存在）。如果设计稿要求 12px 间距，但 mb-3 是 1rem ≈ 16px，硬凑会失准。
$spacers: map-merge($spacers, ("6": 0.75rem));，然后就能用 mb-6
style="margin-bottom: 0.75rem;"，或定义一个 utility class：.mb-12 { margin-bottom: 0.75rem; }
表单控件内部间距（如 input 和 icon 并排）怎么处理
加前缀图标（@）时，input-group 自带内边距逻辑，此时再额外加 me-2 会导致 icon 和文字之间空隙过大。input-group 的内置布局，仅在 input-group 容器外控制与其他字段的间距：
input-group 内部间距由 Bootstrap 的 $input-height 和 $input-padding-x 控制，不要手动干预input-group-text 的 font-size 或 padding，而非加 spacing 类input-group 垂直堆叠时，依然只对最外层
