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