Bootstrap 5布局求助：实现两图+中间居中内容的横向三列布局

直接给你可复用的代码实现，完美匹配你要的布局效果：

<!-- 先引入Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container my-5">
  <div class="row g-4">
    <!-- 左侧图片+标题列 -->
    <div class="col">
      <div class="text-center">
        <img src="你的左侧图片地址" class="img-fluid rounded" alt="左侧图片" style="object-fit: cover; height: 280px; width: 100%;">
        <h5 class="mt-3 fw-bold">左侧图片标题</h5>
      </div>
    </div>

    <!-- 中间居中Div -->
    <div class="col d-flex flex-column justify-content-center align-items-center">
      <div class="p-4 bg-white shadow-sm rounded">
        <h6>中间内容标题</h6>
        <p class="small mt-2">这里可以放任意内容</p>
        <button class="btn btn-outline-primary mt-3">点击操作</button>
      </div>
    </div>

    <!-- 右侧图片+标题列 -->
    <div class="col">
      <div class="text-center">
        <img src="你的右侧图片地址" class="img-fluid rounded" alt="右侧图片" style="object-fit: cover; height: 280px; width: 100%;">
        <h5 class="mt-3 fw-bold">右侧图片标题</h5>
      </div>
    </div>
  </div>
</div>

关键细节说明 #

• 网格布局：用container+row+col实现自动均分的三列布局，g-4控制列之间的间距，可改成g-3/g-5调整大小
• 图片适配：img-fluid保证图片自适应容器宽度，object-fit: cover让图片在固定高度内保持比例，不会拉伸变形；你可以修改height值调整图片高度
• 居中处理：中间列用d-flex flex-column justify-content-center align-items-center实现内容垂直+水平居中，确保中间Div始终处于行的中间位置
• 响应式适配：在手机等小屏幕上，三列会自动垂直堆叠，无需额外修改
• 样式优化：用rounded加圆角、shadow-sm加阴影提升视觉效果，fw-bold让标题更突出

如果需要固定列宽度（比如左右各占3份，中间占6份），可以把col改成col-md-3（左右）和col-md-6（中间），按需调整即可。

内容的提问来源于stack exchange，提问作者Ash Harris