如何在Bootstrap列之间添加自动偏移量

Bootstrap 栅格系统默认采用12列布局规则，实现列之间自动偏移的逻辑非常简单：用栅格总宽度12减去所有列已占用的宽度总和，得到的剩余值就是可使用的自动偏移总宽度，直接调用 Bootstrap 内置的offset-*工具类即可实现。

示例实现 #

你提到的col-5和col-4两个列的场景：

• 已占用总宽度：5 + 4 = 9
• 剩余可分配偏移宽度：12 - 9 = 3
  只需要给靠后的列添加offset-3类，就能在两列之间自动空出3列的间隔，代码示例如下：

<div class="container">
  <div class="row">
    <div class="col-5 p-3 bg-light border">第一列（宽度5）</div>
    <div class="col-4 offset-3 p-3 bg-dark text-white border">第二列（宽度4，前置偏移3）</div>
  </div>
</div>

拓展说明 #

• 如果是多列多间隔的场景，把计算得到的剩余偏移总宽度按需求拆分到不同列的offset-*属性上即可，逻辑完全一致。
• 如果需要做响应式适配，给偏移类加上对应断点前缀即可，比如仅在中等及以上屏幕生效的偏移可以写为offset-md-3，小屏设备会自动取消偏移，避免移动端布局错乱。

内容的提问来源于stack exchange，提问作者Aлександр Агафонов