在Bootstrap列布局中如何使用margin替代自带的padding？

Bootstrap col-4列无间隔问题解决方案 #

你遇到的是Bootstrap栅格系统的默认机制问题：

Bootstrap栅格系统的槽宽（gutter）默认通过「父row负左右margin + 子col正左右padding」实现，没有父row承载负margin时，col-*自带的padding只会向内收缩内容区域，不会在列之间生成可见间隔，这就是三个列紧密相连的原因。

方案1：使用默认列间隔

给三个col-4的外层套上row类容器，即可自动生成默认列间隔：

<div class="container">
  <div class="row">
    <div class="col-4">列1内容</div>
    <div class="col-4">列2内容</div>
    <div class="col-4">列3内容</div>
  </div>
</div>

效果示意：

方案2：移除所有列间隔

如果需要列完全紧密相连，给外层row添加无间隔类即可：

<!-- Bootstrap 4 写法 -->
<div class="row no-gutters">
  <div class="col-4">列1内容</div>
  <div class="col-4">列2内容</div>
  <div class="col-4">列3内容</div>
</div>

<!-- Bootstrap 5 写法 -->
<div class="row g-0">
  <div class="col-4">列1内容</div>
  <div class="col-4">列2内容</div>
  <div class="col-4">列3内容</div>
</div>

效果示意：

方案3：自定义列间隔大小

Bootstrap 5支持直接修改槽宽数值，可选水平间隔gx-*、垂直间隔gy-*、统一间隔g-*，数值范围0-5，数值越大间隔越大：

<!-- 设置水平间隔为12px -->
<div class="row gx-3">
  <div class="col-4">列1内容</div>
  <div class="col-4">列2内容</div>
  <div class="col-4">列3内容</div>
</div>

你当前未做调整的代码效果示意：

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