Bootstrap行内两列图片内外边距相等的实现问题咨询

嘿，这个坑我帮不少人踩过！直接给图片加margin/padding确实会让中间间距翻倍——毕竟两个相邻列的左右边距会叠加，自然就变成两倍宽了。下面给你分版本提供最实用的解决方案：

Bootstrap 5+ 首选：Flex Gap 方案 #

Bootstrap 5开始原生支持flex布局的gap属性，这绝对是解决这类间距问题的最优解！它只会在元素之间添加单次间距，不会叠加，轻松实现内外间距一致：

<!-- 示例：用gap-4和px-4实现1.5rem的统一间距 -->
<div class="row gap-4 px-4">
  <!-- 移除col默认padding，避免额外间距干扰 -->
  <div class="col-6 p-0">
    <img src="你的图片地址1" class="w-100" alt="图片1">
  </div>
  <div class="col-6 p-0">
    <img src="你的图片地址2" class="w-100" alt="图片2">
  </div>
</div>

• gap-4：设置两张图片之间的间距为1.5rem（对应Bootstrap的间距刻度）
• px-4：给row设置左右padding，让图片外侧与父元素的间距和中间保持一致
• p-0：清除col默认的padding，确保图片和容器边缘的间距完全由我们控制

Bootstrap 4 兼容方案 #

如果还在使用Bootstrap 4（不支持flex gap），可以通过自定义CSS配合栅格来实现：

<style>
  .image-row {
    padding: 0 1rem; /* 外侧间距 */
    margin: 0 -0.5rem; /* 抵消col的margin，确保总宽度正确 */
  }
  .image-col {
    width: 50%;
    padding: 0 0.5rem; /* 单侧半间距，相邻列叠加后刚好等于外侧间距 */
  }
</style>

<div class="row image-row">
  <div class="image-col">
    <img src="你的图片地址1" class="w-100" alt="图片1">
  </div>
  <div class="image-col">
    <img src="你的图片地址2" class="w-100" alt="图片2">
  </div>
</div>

这里的思路是：给每个列设置单侧0.5rem的padding，相邻列的padding叠加后就是1rem（和外侧的padding一致），同时用row的负margin抵消列的padding，保证整体布局宽度不会超出父容器。

另外，如果你不想写自定义CSS，也可以用Bootstrap的内置工具类变通：给父容器（比如container）设置px-4，然后给左边列加pr-2、右边列加pl-2——这样中间的pr-2 + pl-2刚好等于外侧的px-4，也能实现一致的效果。

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