Bootstrap三列图片与标题等高布局失效问题求助

问题根源 #

你的代码犯了Bootstrap网格系统的核心错误：所有col-*列元素必须包裹在.row容器内，否则列无法正确分配宽度，就会出现整体偏左、右侧留白过多的情况。另外，内部容器没有统一的对齐和高度控制，导致图片标题不对齐、列高度不一致。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<!-- 给外层容器加上row类，这是Bootstrap网格的必要结构 -->
<div id="section-top-homepage" class="row">
  <!-- vission -->
  <div class="col-md-4 col-sm-4">
    <!-- h-100让容器占满列的高度，实现等高；flex布局让内部元素居中对齐 -->
    <div class="whitecolor h-100 d-flex flex-column align-items-center text-center p-4">
      <!-- img-fluid保证图片响应式，mb-3增加图片和标题的间距 -->
      <img alt="Vision" data-entity-type="file" data-entity-uuid="3afd4d82-63ca-4046-b77c-1d3815e959cf" src="/tilesw/sites/default/files/inline-images/vision.svg" class="img-fluid mb-3" />
      <h3>Vision</h3>
    </div>
  </div>


  <!-- objectives -->

  <div class="col-md-4 col-sm-4">
    <div class="whitecolor h-100 d-flex flex-column align-items-center text-center p-4">
      <img alt="Objectives" data-entity-type="file" data-entity-uuid="6e0a289f-a866-4d46-81c8-6f2f6aceecd8" src="/tilesw/sites/default/files/inline-images/objectives.svg" class="img-fluid mb-3" />
      <h3>Objectives</h3>
    </div>
  </div>
  <!-- mission -->

  <div class="col-md-4 col-sm-4">
    <div class="whitecolor h-100 d-flex flex-column align-items-center text-center p-4">
      <img alt="Mission" data-entity-type="file" data-entity-uuid="aeaa7c28-c987-4174-a2c2-5fa45de0ab83" src="/tilesw/sites/default/files/inline-images/mission.svg" class="img-fluid mb-3" />
      <h3>Mission</h3>
    </div>
  </div>
</div>

关键修改点说明 #

• 添加.row容器：给#section-top-homepage加上.row类，Bootstrap的row会自动处理列的间距和宽度分配，解决右侧留白过多、布局偏左的问题。
• 实现等高：给每个.whitecolor容器加.h-100，让它占满所在列的全部高度，三列自然等高。
• 图片与标题对齐：
  • 给.whitecolor加.d-flex flex-column align-items-center text-center，用Flex布局让内部的图片和标题垂直居中、水平对齐。
  • 图片加.img-fluid保证在不同屏幕尺寸下自适应，.mb-3（margin-bottom）替代自定义的.top25，统一控制图片和标题的间距。
• 如果你的.whitecolor有自定义背景或样式，这些类不会冲突，只会增强布局效果。

内容的提问来源于stack exchange，提问作者Meena Momand