Bootstrap 4列下方出现大量空白，求解决方案

问题场景 #

在md及以上屏幕尺寸下页面显示正常，big_image容器可正常切换缩略图；但在md以下（移动端）屏幕中，big_image（已隐藏）和show_thumbnails区域下方出现大量空白，尝试移除d-md-block类、修改flex布局均无效。

相关代码 #

HTML代码 #

<div class="row">
    <!-- left part -->
    <div class="col-md-6 pr-md-5 border-right">

        <!-- main picture (hidden in mobile) -->
        <div class="row mb-3 d-none d-md-block">
            <div class="col-md-12" id="big_image">
                <img src="<?= base_url('images/zero35.png'); ?>" class="big_image polaroid">
            </div>
        </div>

        <!-- thumbnails -->
        <div class="row">
            <div class="col-md-12">
                <div id="show_thumbnails">
                    <div class="d-flex justify-content-center align-items-center pt-4">
                        <img src="<?= base_url('assets/img/ajax-loader-little.gif'); ?>">
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- end left part -->

    <!-- right part -->
    <div class="col-md-6 pl-md-5 border-right">

CSS代码 #

.big_image {
    max-width: 100%;
    height: auto;
}

#big_image {
    width: 100%;
    max-width: 700px;
    height: 433px;
    margin: 0 auto;
}

问题分析 #

核心问题有两个可能：

1. 固定高度全局生效：你给#big_image设置了全局的height: 433px，虽然移动端父容器被d-none隐藏，但如果浏览器对display:none元素的高度计算存在异常，或有自定义CSS覆盖了隐藏规则，可能导致空白残留。
2. Flex列强制拉伸：Bootstrap 4的row是flex容器，子元素col-*默认会被拉伸到与其他列等高。移动端两个col-md-6会上下排列，若右侧列内容较多，左侧列会被强制拉伸到相同高度，导致show_thumbnails下方出现空白。

解决方案 #

方案1：限制固定高度仅在md及以上生效 #

修改CSS，将#big_image的固定高度放到媒体查询中，避免影响移动端：

.big_image {
    max-width: 100%;
    height: auto;
}

#big_image {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #big_image {
        height: 433px;
    }
}

方案2：阻止列的flex拉伸 #

给左侧的列添加align-self-start类，让它自适应内容高度，不再被拉伸：

<!-- 修改左侧列的class -->
<div class="col-md-6 pr-md-5 border-right align-self-start">

方案3：检查缩略图容器的内部布局 #

如果上述方案无效，排查show_thumbnails内部的flex容器：

• 移除不必要的pt-4类，检查是否是内边距导致的空白
• 给#show_thumbnails添加height: fit-content，强制它自适应内容高度

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