如何实现桌面端三列、移动端一列的Bootstrap响应式布局？

你提供的代码存在几处Bootstrap 4的用法错误，先修正这些问题，再给你符合需求的实现方案：

原代码的问题 #

• Bootstrap 4已移除col-xs-*前缀，移动端默认就是100%宽度（单列），无需添加该类
• col-md-offset-2是Bootstrap 3的写法，Bootstrap 4中应使用offset-md-*，但三个col-md-4加偏移会超出12列总宽度，导致布局错乱
• 第二个列里的多余0类属于无效代码

正确实现代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4 mb-3">
      <img src="https://via.placeholder.com/100" class="img-fluid" />
      <p>Test</p>
    </div>
    
    <div class="col-md-4 mb-3">
      <img src="https://via.placeholder.com/100" class="img-fluid" />
      <p>Test</p>
    </div>
    
    <div class="col-md-4 mb-3">
      <img src="https://via.placeholder.com/100" class="img-fluid" />
      <p>Test</p>
    </div>
  </div>
</div>

关键说明 #

• 桌面三列：col-md-4表示屏幕宽度≥768px（中等桌面屏幕）时，每个列占12格布局中的4格，3个列刚好填满一行，形成三列布局
• 移动单列：Bootstrap 4是移动优先框架，当屏幕宽度<768px时，列会自动堆叠为100%宽度，即单列布局
• justify-content-center让三列在桌面屏幕上居中显示，不需要居中可直接移除该类
• mb-3给每个列添加底部外边距，避免移动设备上列与列间距过近
• img-fluid让图片也具备响应式特性，自动适配容器宽度

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