Bootstrap 4两列换行后如何设置高度适配内容（保留原有功能）

针对你遇到的问题，核心矛盾是桌面端需要列占满高度并支持滚动，移动端需要内容少时高度自适应、内容多时保持滚动，可以通过自定义CSS结合媒体查询解决，不用移除row的flex-grow-1：

步骤1：调整HTML结构 #

给滚动列添加自定义类（比如scroll-col），保留row的flex-grow-1（或Bootstrap自带的flex-fill类）以维持桌面端功能：

<div class="container h-100">
  <div class="row flex-fill">
    <div class="col-md-6 scroll-col overflow-auto">
      <!-- 左侧内容 -->
    </div>
    <div class="col-md-6 scroll-col overflow-auto">
      <!-- 右侧内容 -->
    </div>
  </div>
</div>

步骤2：添加自定义CSS #

通过媒体查询区分桌面/移动端，控制列的flex属性和高度：

/* 桌面端：保持两列平分高度、内容滚动 */
@media (min-width: 768px) {
  .scroll-col {
    max-height: 100%;
    flex-grow: 1; /* 强制平分row高度 */
  }
}

/* 移动端：堆叠布局，高度自适应，内容过多时滚动 */
@media (max-width: 767.98px) {
  .scroll-col {
    flex-grow: 0 !important; /* 取消自动拉伸，高度由内容决定 */
    max-height: calc(100vh - 80px); /* 根据页面实际情况调整，比如减去头部/底部高度 */
    margin-bottom: 1rem; /* 可选：添加列间距 */
  }
}

原理说明 #

• 桌面端通过flex-grow:1让两列平分row的高度，配合overflow-auto实现内容滚动。
• 移动端取消flex-grow，列高度默认由内容撑开；设置max-height限制最大高度，内容超过时自动出现滚动条，同时保留了row的flex-grow-1以维持桌面端的布局功能。

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