如何使用Bootstrap grid system实现指定样式三图网格布局

你要的布局完全可以靠Bootstrap原生栅格的嵌套规则实现，不需要写复杂自定义样式，核心是利用栅格12等分的规则，右半区嵌套行拆分上下两块。

实现要点 #

• 外层用container（固定宽度）或container-fluid（通栏宽度）包裹整个网格
• 整体拆为左右两个等宽列：各占6栅格（对应col-*类写col-md-6即可，断点可按需调整），左列放单张竖图
• 右列内部嵌套新的row，拆为两个占满整列宽度的块（col-12），上下各放一张横图
• 所有图片加img-fluid类自动适配父容器宽度，加object-fit-cover避免图片拉伸变形
• 图片之间的间距直接用栅格自带的g-*间距类控制，比如g-3对应1rem的间距，无需手动写margin
• 移动端适配只需要把列类补全为col-12 col-md-6，屏幕宽度小于768px时三张图会自动全宽竖排，不会挤在一起

完整结构代码 #

<!-- Bootstrap的CSS/JS请统一放在页面公共头尾引入，此处仅展示网格核心结构 -->
<div class="container py-4">
  <div class="row g-3">
    <!-- 左侧单图区域 -->
    <div class="col-12 col-md-6">
      <img src="替换为你的左图资源地址" class="img-fluid w-100 h-100 object-fit-cover rounded" alt="左侧展示图">
    </div>
    <!-- 右侧双图区域 -->
    <div class="col-12 col-md-6">
      <div class="row g-3">
        <div class="col-12">
          <img src="替换为你的右上图片资源地址" class="img-fluid w-100 object-fit-cover rounded" alt="右侧上部展示图">
        </div>
        <div class="col-12">
          <img src="替换为你的右下图片资源地址" class="img-fluid w-100 object-fit-cover rounded" alt="右侧下部展示图">
        </div>
      </div>
    </div>
  </div>
</div>

如果你用的是Bootstrap4版本，没有内置object-fit-cover类，给图片加上style="object-fit: cover;"内联样式就能实现一样的裁切适配效果；如果不需要图片填满容器、要保留原始比例，删掉这个类即可。

效果参考 #

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