如何为Bootstrap单个row容器内的换行行列设置间距

方案1：使用Bootstrap原生垂直间距类（推荐，适配Bootstrap 4.3及以上、Bootstrap 5版本） #

Bootstrap原生提供了gy-*垂直gutter类，直接给外层row添加即可实现自动行间距，完全兼容所有col-sm-*、col-md-*等响应式类的换行规则，不需要手动拆分row。
示例代码：

<div class="row gy-3">
 <div class="col-sm-4 col-md-3"> Div 1</div>
 <div class="col-sm-4 col-md-3"> Div 2</div>
 <div class="col-sm-4 col-md-3"> Div 3</div>
 <div class="col-sm-4 col-md-3"> Div 4</div>
 <div class="col-sm-4 col-md-3"> Div 5</div>
 <div class="col-sm-4 col-md-3"> Div 6</div>
 <div class="col-sm-4 col-md-3"> Div 7</div>
 <div class="col-sm-4 col-md-3"> Div 8</div>
 <div class="col-sm-4 col-md-3"> Div 9</div>
 <div class="col-sm-4 col-md-3"> Div 10</div>
</div>

其中gy-后的数字代表间距大小，对应关系为：gy-1对应0.25rem，gy-2对应0.5rem，gy-3对应1rem，gy-4对应1.5rem，gy-5对应3rem，可根据需求调整。

方案2：自定义CSS兼容旧版本Bootstrap #

如果你使用的Bootstrap版本低于4.3，不支持gy-*类，可通过自定义CSS实现：
首先添加自定义样式：

/* 自定义行间距，可按需调整数值 */
.row.custom-gutter > [class^="col-"] {
  margin-bottom: 20px;
}
/* 抵消最后一行的多余底部间距，避免外层出现多余留白 */
.row.custom-gutter {
  margin-bottom: -20px;
}

给外层row添加自定义类即可：

<div class="row custom-gutter">
 <!-- 所有col结构保持不变 -->
</div>

为什么不推荐拆分row的写法？ #

手动拆分多个row会强制固定每一行的列数量，破坏响应式规则：比如在sm屏幕下规则是一行放3个col-sm-4，拆分row后会出现第一行放3个、第二行放1个、第三行放3个、第四行放1个的错乱排版，无法正常使用响应式列类的特性。

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