.form-group间距不一致的根本原因是Bootstrap的margin设计基于独立块级元素流式排列假设，而真实表单常混用grid、flex、inline元素导致margin折叠失效或叠加。
为什么 form-group 间距总显得不一致？
Bootstrap 的 .form-group 默认用 margin-bottom: 1rem，看似简单，但实际中常出现：多个 form-group 堆叠后下边距“加倍”，表单底部多出一截空白；或嵌套在 .row / .col 中时，因父容器 padding 或 flex 排列干扰，视觉间距错乱。
根本原因不是 CSS 写错了，而是 Bootstrap 的 margin 设计基于「独立块级元素流式排列」假设，而真实表单常混用 grid、flex、inline 元素，导致 margin 折叠失效或意外叠加。
直接覆盖 margin-bottom 的三种安全方式
别碰 !important，也别全局重置 .form-group —— 容易污染其他页面。优先用更具体的选择器局部干预：
- 对单个表单加自定义 class：
然后写：
.my-form .form-group { margin-bottom: 0.75rem; } - 用相邻兄弟选择器收尾：
.form-group + .form-group { margin-top: 0.5rem; margin-bottom: 0.5rem; }这样首尾元素不会多出上/下边距，中间自动对齐 - 对最后一项单独清空：
.form-group:last-child { margin-bottom: 0; }适合固定结构的表单，但注意动态增删字段时需配合 JS 更新
form-group 在 row/col 里为啥更难调？
当 .form-group 放进 .row > .col，常见问题有两层：
-
.col自带padding-left/right: 0.75rem，和.form-group的 margin 叠加后，左右“撑开”感明显 -
.row是 flex 容器，默认align-items: stretch，如果某些.form-group内含textarea或多行内容，高度不一致会拉伸整行，让间距看起来歪斜 - 解决思路：给
.col加padding: 0，再把内边距交给.form-group自己管；或改用gap（仅限现代浏览器）：.row { display: grid; gap: 0.75rem; }
用 gap 替代 margin 的兼容性代价
Bootstrap 5+ 已支持 gap，但旧项目若还在用 Bootstrap 4 或需兼容 IE，则不能直接依赖 gap。即使能用，也要注意：
-
gap只在 flex / grid 容器上生效，.form-group本身是 block 元素，必须把父容器设为display: flex或grid才起作用 - Flex 下
gap不影响第一个/最后一个子项的外边距，但会强制所有项等距，可能破坏原有“标题+输入框”组合的紧凑感 - 实测 Chrome/Firefox/Edge 102+ 没问题，Safari 14.1+ 开始支持，iOS Safari 14.5+ 才稳定 —— 如果用户仍有 iOS 13 设备，
gap就得降级回 margin 方案
真正麻烦的不是怎么写，而是得判断当前表单结构是否允许把 .form-group 父容器统一改成 flex/grid；一旦混用 float、inline-block 或 JS 动态插入节点，gap 就容易失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
