Bootstrap 4 如何使用列布局实现中等及以上视口两张图片并排对齐

问题根因 #

1. 未引入Bootstrap响应式必需的视口元标签，导致响应式断点不生效是最常见原因。
2. 第二列同时混用col和col-5类，col是自适应填充剩余宽度的类，和固定宽度的col-*类冲突，会导致宽度计算异常，触发换行堆叠。
3. 第一列使用全域col-6类，代表所有尺寸视口下都占6格宽度，如果你需要小屏幕下第一张图占满整行，该写法会导致小屏下半行留白。

修复方案 #

首先确认页面<head>标签中已经添加以下元标签，这是Bootstrap所有响应式特性生效的前提：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

之后替换原有栅格代码即可实现需求：中等尺寸及以上视口两张图片并排展示，小视口仅显示第一张且占满整行。

<div class="row">
  <div class="col-12 col-md-6">
    <img class="img-fluid" src="img/1.PNG">
  </div>
  <div class="d-none d-md-block col-md-6">
    <img class="img-fluid" src="img/2.PNG">
  </div>
</div>

如果要保留你原有6:5的宽度比例，将第二列的col-md-6调整为col-md-5即可，总宽度不足12栅格的部分会自动留空作为边距。

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