Bootstrap表单元素默认间距大是因为.form-control、.form-label和.form-check默认设margin-bottom:1rem以提升可读性；紧凑场景需用mb-*等工具类分层控制间距，避免直接覆写CSS。
Bootstrap表单元素为什么默认间距大
Bootstrap 5+ 的 .form-control、.form-label 和 .form-check 组件默认使用 margin-bottom: 1rem（即 16px），这是为了在垂直堆叠时提供可读性。但当表单紧凑（如弹窗、侧边栏或内联编辑）时，这个间距就显得冗余，尤其多个 .form-group 连续出现时，视觉上“松散”感明显。
用 margin 工具类直接覆盖比写 CSS 更安全
不要用自定义 CSS 覆盖 .form-group 或全局重置 .form-control 的 margin——这会破坏 Bootstrap 响应式断点逻辑和主题一致性。推荐优先使用内置间距工具类，它们基于 rem、支持响应式前缀（如 mb-md-0），且层级可控。
-
mb-0：移除底部 margin（最常用） -
mb-1～mb-5：对应 0.25rem～3rem，适合微调（mb-2≈ 0.5rem = 8px） -
mb-sm-0等响应式类：仅在特定断点生效，避免移动端挤压 - 对
.form-check，建议加mb-1而非mb-0，否则复选框与文字贴得太近
哪些元素必须单独处理，不能只靠 mb-*
单纯给 .form-group 加 mb-0 并不能解决全部问题：label 和 input 之间、input 和 help text 之间仍有默认间距。需要分层控制：
-
<label></label>标签本身带margin-bottom: 0.5rem，需额外加mb-0 -
<small class="form-text"></small>默认有margin-top: 0.25rem，用mt-0清除 - 多个
.input-group堆叠时，mb-0要加在.input-group容器上，而非内部的.form-control - 使用
flex-column布局的表单（如.row > .col），注意gap可能叠加 margin，此时优先用gap-0配合mb-0
常见错误：用了 mb-0 却没生效
典型原因是 CSS 特异性（specificity）冲突或类名位置不对。比如：
立即学习“前端免费学习笔记（深入）”；
- 把
mb-0加在<div class="form-control"> 上——错，<code>.form-control是输入框本身，不接受 margin 工具类；应加在外层容器（如<div class="mb-0"><input class="form-control"></div>） - 在自定义 SCSS 中重写了
$spacers但没重建 CSS，导致mb-2实际值不是预期的 8px - 用了
!important强制覆盖，结果在暗色模式或 RTL 布局下失效 - 表单嵌套在
.modal-body内，而.modal-body自带padding，误以为是 margin 问题
真正要紧的是看清 DOM 结构层级，再决定 margin 类该加在哪一层——往往多套一层 <div class="mb-1"> 比改源码更稳。</div>
