本文详解在 Bootstrap 布局中消除两列方形容器间多余空白的方法，涵盖默认 padding 干扰分析、.square-container 宽度适配、Bootstrap 5+ 内置 gutter 系统的正确用法，并提供可直接运行的代码示例与关键注意事项。

本文详解在 bootstrap 布局中消除两列方形容器间多余空白的方法，涵盖默认 padding 干扰分析、`.square-container` 宽度适配、bootstrap 5+ 内置 gutter 系统的正确用法，并提供可直接运行的代码示例与关键注意事项。

在使用 Bootstrap 构建响应式双列布局（如左图右块、或双列方形容器组）时，开发者常遇到“列之间看似有无法消除的空白”问题。这并非 CSS margin 或 gap 所致，而是 Bootstrap 默认栅格系统为 .col-* 类内置了 左右各 15px 的 padding（即每列总内边距 30px），用于实现列间标准间距（gutter）。当容器尺寸固定（如 .square-container { width: 220px; height: 235px; }）且未占满父列宽度时，该 padding 就会表现为“额外空白”，尤其在视觉对齐要求严格的 UI 中尤为明显。

✅ 正确解法：三步精准控制间距

1. 让子容器填满父列宽度（消除内部留白）

将 .square-container 的宽度设为 100%，而非固定像素值，使其自适应所在 .col-md-6 的可用宽度（扣除 padding 后约为 50% - 30px）。同时建议添加 box-sizing: border-box 确保 padding/border 不影响尺寸计算：

.square-container {
  width: 100%;
  height: 235px; /* 高度可保持固定，或设为 aspect-ratio: 1 / 1 */
  box-sizing: border-box;
}

2. 使用 Bootstrap 内置 gutter 系统（推荐，语义清晰）

Bootstrap 5.1+ 提供标准化的 gutter-* 工具类（如 g-0, g-2, g-4），可直接作用于 .row 元素，统一控制所有子列之间的间距（即移除或重设 padding）。这是最规范、响应式友好的方案：

<div class="row g-0"> <!-- 移除所有 gutter -->
  <div class="col-md-6">
    <img src="./img/02.jpg" class="img-fluid" alt="Image">
  </div>
  <div class="col-md-6">
    <div class="row g-0"> <!-- 子 row 同样移除 gutter -->
      <div class="col-md-6">
        <div class="square-container bg-primary"></div>
      </div>
      <div class="col-md-6">
        <div class="square-container bg-secondary"></div>
      </div>
      <div class="col-md-6">
        <div class="square-container bg-success"></div>
      </div>
      <div class="col-md-6">
        <div class="square-container bg-danger"></div>
      </div>
    </div>
  </div>
</div>

✅ g-0 表示 gutter 为 0（即列 padding 归零）；g-2 ≈ 0.5rem（8px），g-3 ≈ 1rem（16px）——完整对照见 Bootstrap Gutters 文档。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

3. （备选）手动覆盖 padding（仅限特殊场景）

若需精细控制（如仅移除右侧 padding），可覆写 .col-md-6 的 padding：

.col-md-6.no-gutter {
  padding-left: 0;
  padding-right: 0;
}

并在 HTML 中应用：

<div class="col-md-6 no-gutter">
  <div class="square-container bg-primary"></div>
</div>

⚠️ 注意：此方式破坏 Bootstrap 栅格一致性，不推荐在多处复用，且需自行处理响应式断点（如 .col-sm-6.no-gutter）。

? 关键注意事项

• 勿滥用 grid 替代 row/col：原问题中尝试用 display: grid 导致方块垂直堆叠，是因为未设置 grid-template-columns: repeat(2, 1fr) —— 若坚持用 Grid，需完整定义模板，但会失去 Bootstrap 响应式断点能力。
• 高度一致性建议：为保证双列视觉平衡，右侧四个方块宜采用等高设计。可借助 aspect-ratio: 1（现代浏览器）或 padding-top: 100% + position: relative/absolute 实现真正正方形。
• 图片容器适配：左侧 .img-fluid 图片默认 max-width: 100%，无需额外处理；但若需与右侧方块严格等高，可添加 height: 235px; object-fit: cover;。

通过以上方法，你不仅能彻底消除非预期空白，还能以符合 Bootstrap 设计哲学的方式，灵活、可维护地控制系统级间距。