Bootstrap4如何在不减少列数的前提下为两个等宽列添加相等间距

核心逻辑 #

两个col-*-6的默认总宽度为100%，直接给列加水平外边距会导致总宽度超出行容器阈值触发换行，以下两种方案均可在保留2列等宽布局的前提下实现列间距：

方案1：Bootstrap原生栅格实现（兼容性最佳） #

Bootstrap栅格默认通过列的左右padding实现间距，你当前把背景色直接设置在列元素上，导致padding区域被背景填充看不到间距，调整方式如下：

1. 保留原有列的col-lg-6 col-md-6占比类，无需修改列数
2. 在每列内部嵌套一层容器，把背景、边框样式移到内层容器上
3. 可通过Bootstrap内置的padding工具类调整间距大小

修改后代码示例：

HTML代码

<div class="row mx-auto green-row-sub-row d-flex justify-content-center">
  <!-- 给列加px-2类代表左右各8px内边距，两列总间距为16px，可替换为px-1/px-3等调整大小 -->
  <div class="col-lg-6 col-md-6 ml-sm-0 my-md-1 px-2">
    <div class="borders green-row-sub-columns">
      <!-- 列原有内容放在这里 -->
    </div>
  </div>
  <div class="col-lg-6 col-md-6 my-md-1 ml-sm-0 px-2">
    <div class="borders green-row-sub-columns">
      <!-- 列原有内容放在这里 -->
    </div>
  </div>
</div>

CSS代码（无需修改原有样式）

.green-row-sub-row
{
    width: 100%;
    height: 94%;
}

.green-row-sub-columns
{
    background-color: rgb(125, 141, 186);
}

方案2：Flex Gap实现（代码改动最小） #

你的行容器已经开启了flex布局，可直接通过flex的gap属性设置间距，同时调整列的宽度计算逻辑适配gap即可，无需修改HTML结构：

修改后的CSS代码

.green-row-sub-row
{
    width: 100%;
    height: 94%;
    gap: 16px; /* 自定义两列之间的总间距，可自行调整数值 */
}

.green-row-sub-columns
{
    background-color: rgb(125, 141, 186);
    flex: 0 0 calc(50% - 8px); /* 50%宽度减去间距的一半，适配gap占用的宽度 */
    max-width: calc(50% - 8px);
}

该方案兼容Chrome 84+、Firefox 63+、Safari 14.1+，无需兼容低版本浏览器可直接使用。

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