Bootstrap列堆叠问题：三col-4无法横向排列，d-block致布局异常

嘿，我一眼就瞅出你这问题的症结了！你给.row加了d-md-block类，直接把Bootstrap栅格依赖的flex布局给搞崩啦！

Bootstrap的.row默认是用display: flex来实现横向布局的，里面的.col-*类都是基于flex属性分配宽度的。结果你加了d-md-block，让md及以上尺寸的row变成了块级元素，flex布局直接失效，col自然就变成上下堆叠的块级元素，根本没法横向排列。

给你两个关键修复步骤：

1. 修正row的显示类 #

把row的类从d-none d-md-block改成d-none d-md-flex，这样在md及以上尺寸时，row依然保持flex容器的特性，col就能正常横向排列了：

<div class="row d-none d-md-flex">
  <div class="col-md-4">
    <img class="img-fluid" src="images/website images/userResearch1.jpg" alt="User Research Qualitative Notes"/>
  </div>
  <div class="col-md-4">
    <img class="img-fluid" src="images/website images/your-second-image.jpg" alt="Second Image"/>
  </div>
  <div class="col-md-4">
    <img class="img-fluid" src="images/website images/your-third-image.jpg" alt="Third Image"/>
  </div>
</div>

2. 优化col的类（可选但推荐） #

把.col-4改成.col-md-4，这样更明确地指定只在md及以上尺寸使用4列布局，语义更清晰，也避免在其他尺寸（虽然你已经用d-none隐藏了）出现意外布局。

额外检查点 #

• 确认你已经正确引入了Bootstrap的CSS文件，没有版本冲突（比如别同时混用Bootstrap 4和5的类）；
• 检查有没有自定义CSS覆盖了.row或.col-md-4的默认样式，比如是否给col加了float: none或者display: block !important这类干扰布局的属性。

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