移动端视图下页面出现多余空白的解决方法

该异常仅在进入移动端视图时出现，问题效果如下：

此前尝试使用responsive类替换fluid类无法彻底解决问题，仅会造成图片被放大。
相关区块原始HTML代码如下：

<div class="row no-gutters">
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za miran život bez stresa!</h2>
    <br>
    <p class="mb-0 text-white-50">321 GARAŽNO MESTO</p>
    <p class="mb-0 text-white-50">+ priključci za električni automobil, auto-perionica u garaži.</p>
  </div>
  <div class="col-6">
    <img src="assets/img/slikablok2.jpg" class="img-fluid">
  </div>
</div>

<div class="row no-gutters">
  <div class="col-6">
    <img src="assets/img/slikablok3.jpg" class="img-fluid">
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="text-white"> SPOJITE SE SA PRIRODOM! </h2>
    <br>
    <p class="mb-0 text-white">Naša inspiracija – Gorica, simbol je magičnog lijepog parka koji se prostire 
    parkom površine od čak 1,4 hektara.</p>
    <p class="mb-0 text-white">Njime poručujemo da se spojite sa prirodom, procvetate i napredujete.</p>
  </div>
  <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za sve vremenske prilike i potpuno uživanje.</h2>
    <br>
    <p class="mb-0 text-white-50">GRIJANJE I HLAĐENJE</p>
    <p class="mb-0 text-white-50">U stambenom dijlu objekta primenjen je sistem grijanja i hlađenja svih prostorija, najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-6">
    <img src="assets/img/slikablok4.jpg" class="img-fluid">
  </div>
</div>

问题根源 #

• 栅格结构错误：Bootstrap默认每行（.row）总宽度为12等份，单个.col-6占6等份（50%宽度），第二个.row内塞了4个.col-6，总占比达到24等份，超出容器宽度后会触发自动换行，移动端视口宽度较小时换行计算逻辑错位，直接产生异常空白。实际这部分内容是两组「图文/文图」配对的块，本该拆分为两个独立行。
• 未做移动端响应式适配：所有列固定使用.col-6，意味着宽度不足576px的手机端也强制保持左右两列布局，文本块被挤压后的高度和相邻图片高度不匹配，会撑出多余空隙；同时图片默认为行内元素，底部自带的基线留白也会增加多余空隙。

修复步骤 #

1. 拆分错误的栅格行：把第二个.row里后两个.col-6（第三、第四个列）拆出来，单独放到第三个新的.row容器中，保证每个.row内只有2个.col-6，总宽度占比刚好12等份，不会溢出换行。
2. 配置响应式列宽：把所有列的类从固定col-6改为col-12 col-sm-6，实现移动端（<576px）单列占满宽度、平板及以上端保持左右两列的自适应效果，避免小屏内容挤压错位。
3. 消除图片默认空隙：给所有图片添加w-100 d-block类，让图片自动占满列宽、转为块级元素，彻底消除行内元素默认的底部基线留白。
4. 可选优化：给所有文本列添加p-4类增加内边距，避免移动端单列布局时文字贴边，提升可读性。

修复后完整代码 #

<div class="row no-gutters">
  <div class="col-12 col-sm-6 d-flex align-items-center flex-column justify-content-center bg-dark p-4">
    <h2 class="mb-0 text-white">Za miran život bez stresa!</h2>
    <br>
    <p class="mb-0 text-white-50">321 GARAŽNO MESTO</p>
    <p class="mb-0 text-white-50">+ priključci za električni automobil, auto-perionica u garaži.</p>
  </div>
  <div class="col-12 col-sm-6">
    <img src="assets/img/slikablok2.jpg" class="img-fluid w-100 d-block">
  </div>
</div>

<div class="row no-gutters">
  <div class="col-12 col-sm-6">
    <img src="assets/img/slikablok3.jpg" class="img-fluid w-100 d-block">
  </div>
  <div class="col-12 col-sm-6 d-flex align-items-center flex-column justify-content-center bg-dark p-4">
    <h2 class="text-white"> SPOJITE SE SA PRIRODOM! </h2>
    <br>
    <p class="mb-0 text-white">Naša inspiracija – Gorica, simbol je magičnog lijepog parka koji se prostire 
    parkom površine od čak 1,4 hektara.</p>
    <p class="mb-0 text-white">Njime poručujemo da se spojite sa prirodom, procvetate i napredujete.</p>
  </div>
</div>

<div class="row no-gutters">
  <div class="col-12 col-sm-6 d-flex align-items-center flex-column justify-content-center bg-dark p-4">
    <h2 class="mb-0 text-white">Za sve vremenske prilike i potpuno uživanje.</h2>
    <br>
    <p class="mb-0 text-white-50">GRIJANJE I HLAĐENJE</p>
    <p class="mb-0 text-white-50">U stambenom dijlu objekta primenjen je sistem grijanja i hlađenja svih prostorija, najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-12 col-sm-6">
    <img src="assets/img/slikablok4.jpg" class="img-fluid w-100 d-block">
  </div>
</div>

补充说明 #

如果要求移动端也必须保持左右两列布局、不做上下堆叠，只需要把列类改回col-6，但必须先完成栅格行拆分，同时给文本列加上足够的内边距，避免文字过度挤压导致高度不匹配撑出空白。但该方案不推荐，小屏设备上左右两列的文字尺寸过小，可读性很差。

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