Bootstrap响应式布局移动端堆叠列间距过大解决方案

移动端两列堆叠时间隙过大的核心原因是你给.row设置了全局固定min-height: 300px：

• 桌面端两列并排时，内容总高度接近300px，搭配align-items: center可以实现四周均匀留白
• 移动端两列折行垂直排列后，内容总高度远小于300px，flex布局会自动将剩余高度拆分分配到两行的上下间隙，最终表现为两列之间出现大块空白

用响应式规则适配不同断点的布局表现即可，不需要改动原有DOM核心结构，两种实现方式可选：

方式1：纯Bootstrap自带类实现（无额外自定义媒体查询） #

直接调整row标签的类名，删除原有CSS里固定写死的全局min-height，调整后代码如下：

.row{
  background-color: rgb(120,120,120);
}
.imgclass{
  min-height: 100px;
}
.row .col-md-5{
  border: 2px solid black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div>Previous Section</div>
<!-- 调整row类：新增响应式内边距、垂直间距 -->
<div class="row justify-content-center align-items-center g-0 gy-3 py-5 py-md-0" style="min-height: 300px;">
    <div class="imgclass col-md-5 m-0 p-0 text-center">
      <img src="/img/body.png" alt="body_img">
    </div>
    <div class="col-md-5 m-0 p-0 text-left">
      <div>
        Some text
      </div>
      <div>
        Some other text
      </div>
    </div>
</div>

<div>Next Section</div>

核心类名作用：

• gy-3：控制垂直排列时两列之间的间距为1rem，可根据需要调整数值（gy-2为0.5rem，gy-4为1.5rem）
• py-5：移动端给容器上下加3rem内边距，保证上下留白均匀
• py-md-0：md及以上桌面端取消上下内边距，靠固定min-height+align-items:center实现居中留白

方式2：自定义CSS媒体查询适配 #

如果不想写内联样式，可以通过媒体查询单独控制移动端样式：

.row{
  background-color: rgb(120,120,120);
  min-height: 300px;
  /* 控制垂直堆叠时列间距 */
  row-gap: 1rem;
  /* 桌面端上下留白靠min-height，移动端靠padding */
  padding-block: 3rem;
}
.imgclass{
  min-height: 100px;
}
.row .col-md-5{
  border: 2px solid black;
}
/* 匹配Bootstrap md断点以下的移动端场景 */
@media (max-width: 767.98px) {
  .row {
    min-height: auto;
  }
}

HTML部分保持原有结构即可，不需要修改类名。

两种方式最终效果一致：桌面端保留原有并排居中、四周均匀留白的效果；移动端两列堆叠时间距可控，容器上下留白均等，不会出现多余的大段空白。

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