Bootstrap 4列换行垂直内边距问题：自定义form-group布局间距异常求助

嘿，这个坑我踩过！你大概率是没给拆分后的内部元素加上垂直间距控制——毕竟form-group默认的间距是针对整个组件的，当你手动把内容拆成两行后，组内的元素之间就没了自带的间距，自然和其他form-group的美观度脱节。

给你几个靠谱的解决方案，根据你的技术栈选就行：

1. 用Bootstrap内置间距类（最省心） #

如果你用的是Bootstrap，直接给小屏时需要换行的元素加「仅小屏生效的底部间距类」，比如mb-sm-3（sm对应小屏断点，3对应间距大小，和form-group默认的margin-bottom匹配）。举个例子：

<div class="form-group">
  <label class="col-md-2 col-sm-12 mb-sm-3">用户名</label>
  <input type="text" class="col-md-10 col-sm-12 form-control" placeholder="请输入用户名" />
</div>

这里宽屏时label占2列、输入框占10列（凑满12列一行），小屏时两者各占12列自动换行，mb-sm-3让小屏下label和输入框之间的间距和其他form-group的间距保持一致。

2. Flex布局用gap属性（Bootstrap 5+适用） #

如果你用flex来实现响应式布局，直接给form-group加gap-3类，它会自动给flex容器内的元素添加水平/垂直间距，不管是行布局还是列布局都生效：

<div class="form-group d-flex flex-wrap flex-md-row flex-column gap-3">
  <label class="flex-md-2 flex-fill">手机号</label>
  <input type="tel" class="flex-md-10 flex-fill form-control" placeholder="请输入手机号" />
</div>

gap-3的间距大小和Bootstrap默认的form-group间距对齐，完美解决小屏垂直布局的间距问题。

3. 自定义CSS兜底（适配任意框架） #

如果不用框架或者需要更定制化的间距，写个媒体查询给小屏下的子元素加底部间距就行：

/* 小屏断点（比如767px以下） */
@media (max-width: 767px) {
  .form-group > *:not(:last-child) {
    margin-bottom: 1rem; /* 和form-group默认的margin-bottom数值保持一致 */
  }
}

这段代码会给小屏下form-group里除了最后一个元素之外的所有子元素加底部间距，确保和其他form-group的视觉节奏统一。

核心原因就是：form-group的默认间距是「组与组之间」的，而你拆分后需要的是「组内元素之间」的垂直间距，这部分默认是没有的，得手动补上～

内容的提问来源于stack exchange，提问作者Vincent