本文详解如何在 Bootstrap 布局中精准控制两列方形容器（如图片与色块组）之间的水平间距，重点解决因默认 col-* 内边距（gutter）导致的间隙不均问题，并提供兼容性好、语义清晰的 CSS 与 Bootstrap 原生方案。
本文详解如何在 bootstrap 布局中精准控制两列方形容器（如图片与色块组）之间的水平间距，重点解决因默认 `col-*` 内边距（gutter）导致的间隙不均问题，并提供兼容性好、语义清晰的 css 与 bootstrap 原生方案。
在使用 Bootstrap 构建响应式双列布局（例如左侧一张图片、右侧四块等宽方形色块）时，开发者常遇到一个典型问题：两列之间出现意外的空白，且右侧子列内部的方形容器上下堆叠、间距不一致。根本原因在于 Bootstrap 的栅格系统默认为每个 .col-* 元素设置了 padding-left: 15px 和 padding-right: 15px（即“gutter”），该内边距用于在列之间创建间隔，但若未统一处理，会导致视觉错位与尺寸计算偏差。
✅ 正确解法：利用 Bootstrap 5+ 的原生 gutter 控制
Bootstrap 5 引入了语义化更强的 gutter 工具类（如 gx-*, gy-*, g-*），可独立控制水平/垂直间距，无需覆盖原始 padding。针对你的结构，推荐以下优化方案：
<div class="row g-0"> <!-- 关键：移除整行默认水平间距 -->
<div class="col-md-6 p-0"> <!-- 移除列内边距，确保内容紧贴 -->
<img src="./img/02.jpg" class="img-fluid" alt="Image">
</div>
<div class="col-md-6 p-0">
<div class="row g-0"> <!-- 子行也关闭 gutter -->
<div class="col-md-6 p-0">
<div class="square-container bg-primary"></div>
</div>
<div class="col-md-6 p-0">
<div class="square-container bg-secondary"></div>
</div>
<div class="col-md-6 p-0">
<div class="square-container bg-success"></div>
</div>
<div class="col-md-6 p-0">
<div class="square-container bg-danger"></div>
</div>
</div>
</div>
</div>同时更新 CSS，使 .square-container 自适应父列宽度（避免固定像素导致换行或溢出）：
.square-container {
width: 100%; /* 关键：撑满所在 col-md-6 宽度 */
height: 235px; /* 高度可保持固定，或设为 aspect-ratio: 1 / 1 实现正方形 */
/* 可选：增强响应式 —— 使用 aspect-ratio 替代固定宽高 */
/* aspect-ratio: 1 / 1; */
}⚠️ 注意事项与进阶建议
- 不要滥用 !important 或全局重置 padding：直接修改 .col-* 的 padding 会影响整个项目栅格行为，应优先使用 p-0、g-0 等工具类实现局部控制。
-
关于“Grid 失效”问题：你提到用 display: grid 后方块变为单列，是因为未设置 grid-template-columns。若坚持用 Grid，可将右侧容器改为：
.square-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 两列等宽 */ gap: 0; /* 严格控制间隙 */ }并移除内部所有 Bootstrap 列类，但此举会放弃响应式断点优势，不推荐替代原生栅格。
- 响应式一致性：Bootstrap 的 g-0 在所有断点生效；如需仅在中屏及以上去间隙，可用 g-md-0。
-
正方形容器的现代写法：为适配不同屏幕并避免高度塌陷，建议用 aspect-ratio: 1 / 1 替代固定 width/height（支持度 ≥95%）：
.square-container { aspect-ratio: 1 / 1; width: 100%; }
✅ 总结
消除双列间多余空间的核心逻辑是：关闭 Bootstrap 默认 gutter（g-0） + 清除列内边距（p-0） + 让内容容器 100% 占据列宽。这既符合框架设计哲学，又具备良好的可维护性与响应式鲁棒性。避免手动计算 15px 偏移或强行覆盖基础类，善用 Bootstrap 提供的间距工具集，才是高效构建一致 UI 的专业实践。
