Bootstrap 5是否移除了row元素之间的默认垂直间距？

Bootstrap 5 row元素无默认垂直间距问题解答 #

是否必须显式使用spacing工具类设置间距 #

是，Bootstrap 5的.row元素默认没有内置垂直间距，你确实需要显式添加mb-3、mb-2这类间距工具类来实现行之间的间隔，这是框架的原生设计，你提供的测试代码运行后表现符合预期，不存在写法错误。

移除行默认垂直间距的原因 #

• 降低默认样式干扰：作为通用前端框架，Bootstrap 5默认不为布局元素添加上下文相关的边距，避免开发者在不需要行间距的场景下需要手动重置样式，减少冗余代码。
• 统一间距管理规则：所有间距需求都通过标准化的spacing工具类实现，让不同开发者开发的项目间距规范更统一，也方便全局调整项目的间距尺度。
• 适配多场景使用需求：.row元素不只用于表单布局，还会应用在卡片、网格列表、导航栏等大量不同场景中，不同场景对行间隔的要求差异极大，默认添加间距反而会增加多场景适配的成本。

更高效的间距设置方案 #

如果不想给每个.row都单独加间距类，也可以选择以下方案：

1. 给父容器设置gap属性
   给包含所有.row的父元素添加d-flex flex-column gap-3类，一次设置所有子元素的垂直间距，你的表单代码可以调整为：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form class="d-flex flex-column gap-3">
  <div class="row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>  
  <div class="row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

2. 自定义全局样式
   如果项目中所有.row都需要默认间距，可以全局添加自定义样式：

.row:not(:last-child) {
  margin-bottom: 1rem;
}

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