使用Bootstrap创建带15px间距的图片网格的实现求助

嘿，我看你现在在尝试用Bootstrap搭建一个带精确15px间距的图片网格布局，已经有了基础代码但卡在间距和布局细节上对吧？我来帮你捋捋怎么调整，尽量多复用Bootstrap自带的类，把自定义CSS降到最少。

首先先回应你最关心的问题：能不能完全只用Bootstrap自带类，不用自定义CSS？ 其实Bootstrap的默认间距类是基于$spacer变量（默认1rem=16px），自带的g-*类没有刚好15px的选项（比如g-3是12px，g-4是16px）。如果能接受接近的间距，用g-4就能直接实现；但如果必须精确15px，还是需要加一行极简的自定义CSS来补充，不过大部分布局逻辑还是能靠Bootstrap类完成。

下面是调整后的完整代码，我尽量用Bootstrap的原生类重构了布局，只保留了必要的自定义CSS：

/* 仅保留必要的自定义样式，其余全靠Bootstrap类 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
.container-fluid {
  width: 80% !important;
  margin: 200px auto;
  background-color: green;
  height: 500px;
}
/* 自定义15px间距类，填补Bootstrap默认间距的空白 */
.gap-15 {
  gap: 15px !important;
}
/* 图片裁剪和填充的样式，Bootstrap无自带类，必须自定义 */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16/9;
}
figure {
  margin-bottom: 0 !important;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Row double 50% height with gap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <section class="mosaic mosaic-02 container-fluid fade-slide fade-slide-down">
    <!-- 外层主行：用gap-15控制左右15px间距，h-100占满容器高度 -->
    <div class="row h-100 gap-15">
      <!-- 左侧大图片列：占满高度 -->
      <div class="col-6 h-100">
        <figure class="h-100 m-0">
          <img src="https://picsum.photos/1200/800" alt="Placeholder" />
        </figure>
      </div>
      <!-- 右侧上下两列组：用flex-column垂直排列，gap-15控制上下15px间距 -->
      <div class="col-6 d-flex flex-column gap-15 h-100">
        <!-- 上半行：h-50占满右侧一半高度，gap-15控制内部左右间距 -->
        <div class="row h-50 gap-15">
          <figure class="col-6 h-100 m-0">
            <img src="https://picsum.photos/1500/800" alt="Placeholder" />
          </figure>
          <figure class="col-6 h-100 m-0">
            <img src="https://picsum.photos/1200/850" alt="Placeholder" />
          </figure>
        </div>
        <!-- 下半行：同上 -->
        <div class="row h-50 gap-15">
          <figure class="col-6 h-100 m-0">
            <img src="https://picsum.photos/800/800" alt="Placeholder" />
          </figure>
          <figure class="col-6 h-100 m-0">
            <img src="https://picsum.photos/1200/900" alt="Placeholder" />
          </figure>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

关键调整点说明： #

1. 用Bootstrap原生类替代自定义布局：把你原来的row-double自定义类换成了Bootstrap的d-flex、flex-column、h-100、h-50这些自带类，更贴合Bootstrap的设计逻辑，也减少了自定义代码量。
2. 精确控制15px间距：通过自定义gap-15类实现精确的15px间隙，比用padding/margin更可靠，不会出现布局溢出的问题（Bootstrap的row默认有负margin，用gap可以避开这个坑）。
3. 图片裁剪优化：保留了object-fit: cover确保图片填满容器且按比例裁剪，这部分Bootstrap没有自带类，必须自定义，但代码量很少。
4. 清除默认边距：用m-0去掉了figure和row的默认边距，避免和自定义间距冲突。

如果实在不想加任何自定义CSS，把所有gap-15换成g-4就能得到16px的间距，和15px非常接近，完全不用写自定义样式~

内容来源于stack exchange