Bootstrap响应式列布局失效，如何实现多模块并排对齐？

问题原因 #

你写的代码无法实现多列并排效果，是因为所有内容都放在了同一个.col容器内。Bootstrap栅格系统的规则是，每一个需要并排展示的内容单元，都要对应独立的列类容器。

修正后的完整代码 #

<!-- 引入Bootstrap4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- 补充引入Font Awesome CSS，用于渲染你用到的图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<div class="container py-4">
  <!-- 顶部总说明区域 -->
  <div class="row mb-4">
    <div class="col-12">
      <h6>我们已为全球2000万人资助了12万个慈善项目。</h6>
    </div>
  </div>
  <!-- 服务项目并排区域 -->
  <div class="row g-3">
    <!-- 清洁饮水模块 -->
    <div class="col-md-4">
      <h6>清洁饮水</h6>
      <i class="fas fa-tint"></i>
      <p>全球有6.33亿人仍在饮用不干净的水。在你的帮助下，我们可以提供清洁水源改善大众健康水平。</p>
    </div>
    <!-- 健康食物模块 -->
    <div class="col-md-4">
      <h6>健康食物</h6>
      <i class="fas fa-seedling"></i>
      <p>在你的帮助下，我们已经为弱势群体提供了优质健康的食物。</p>
    </div>
    <!-- 教育支持模块 -->
    <div class="col-md-4">
      <h6>教育支持</h6>
      <i class="fas fa-book"></i>
      <p>我们用收到的捐款援建学校，让孩子们有机会获得优质的教育资源。</p>
    </div>
  </div>
</div>

如果需要保留原英文文本，直接把对应位置的中文替换回你的原始英文内容即可。

调整说明 #

• 补充了Font Awesome资源引入，你代码中使用的fas开头的图标类，需要加载对应的Font Awesome资源才能正常显示
• 拆分了栅格结构：顶部总说明占满整行宽度，下方三个服务模块均使用col-md-4类，在中等及以上宽度的屏幕（≥768px）下会自动三等分并排展示，小屏幕下自动堆叠适配移动端浏览
• 可以根据实际需求调整列类的断点：如果需要所有尺寸下都并排，就把col-md-4替换为col-4；如果需要仅大屏幕才并排，就替换为col-lg-4

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