如何在Bootstrap列间添加3px边距？解决列错位问题

嘿，这个问题我之前也碰到过！核心原因是Bootstrap的栅格系统基于12列宽度分配逻辑，直接给col-*类的元素加margin会让元素总宽度（自身宽度+margin）超过父容器可用空间，导致第三个区块被挤到下一行。下面给你几个靠谱的解决方案：

方案1：用Bootstrap内置的间距类（推荐，适配Bootstrap 5+） #

Bootstrap 5已经内置了专门处理栅格列间距的g-*类，直接给包裹列的row添加这个类就能轻松实现间距，完全不会破坏栅格布局：

<div class="row g-3">
  <div style='border:solid black 1px' class='col-md-6'>
    <h1>Block 1</h1>
  </div>
  <div style='border:solid black 1px' class='col-md-3'>
    <h1>Block 2</h1>
  </div>
  <div style='border:solid black 1px' class='col-md-3'>
    <h1>Block 3</h1>
  </div>
</div>

g-3表示列之间的间距为0.75rem（你可以根据需求换成g-1到g-5，或者自定义数值比如g-4），Bootstrap会自动通过调整padding和负margin实现间距，同时保证总宽度不超过12列。

方案2：适配Bootstrap 4的写法 #

如果你还在使用Bootstrap 4，可以通过给row加负margin抵消列的padding，再给列加水平padding来实现间距：

<div class="row mx-n2">
  <div style='border:solid black 1px' class='col-md-6 px-2'>
    <h1>Block 1</h1>
  </div>
  <div style='border:solid black 1px' class='col-md-3 px-2'>
    <h1>Block 2</h1>
  </div>
  <div style='border:solid black 1px' class='col-md-3 px-2'>
    <h1>Block 3</h1>
  </div>
</div>

• mx-n2给row添加负的水平margin，抵消列默认的padding
• px-2给每个列添加水平padding，形成列之间的间距

方案3：给列套外层容器加margin #

如果不想修改栅格的默认样式，也可以给每个col-*元素套一个外层div，把margin加在外层容器上：

<div class="row">
  <div class="me-md-3 mb-3 mb-md-0">
    <div style='border:solid black 1px' class='col-md-6'>
      <h1>Block 1</h1>
    </div>
  </div>
  <div class="me-md-3 mb-3 mb-md-0">
    <div style='border:solid black 1px' class='col-md-3'>
      <h1>Block 2</h1>
    </div>
  </div>
  <div>
    <div style='border:solid black 1px' class='col-md-3'>
      <h1>Block 3</h1>
    </div>
  </div>
</div>

• me-md-3表示在中等屏幕及以上，给容器添加右侧margin
• mb-3 mb-md-0表示在小屏幕下添加底部margin（让区块垂直排列时有间距），中等屏幕及以上取消底部margin

这样外层容器的margin不会影响内部col-*的宽度计算，自然也就不会出现错位问题啦！

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