Bootstrap列间距设置问题：如何为列添加自定义间距？

嘿，我完全懂你想给Bootstrap列加间距却没生效的烦恼！默认情况下Bootstrap的栅格系统靠内置的padding控制列间距，但你的代码写法可能有点问题，咱们来一步步调整：

首先说下你现有代码的小问题：你在col-sm-4里面直接嵌套了col-sm-11，这其实破坏了Bootstrap栅格的结构——col本身自带左右padding，嵌套col会让布局变得混乱，而且自定义的row_padding类如果没写对应的CSS样式，自然也不会生效。

下面给你几种靠谱的解决方案，按需选择：

方案1：用Bootstrap自带的间距工具类（推荐） #

Bootstrap提供了一套现成的间距工具类，不用自己写CSS就能快速加间距，还兼容响应式：

给列内的容器加内边距 #

如果想让内容和列边缘有间距，在col内部的容器上用p-*类（p是padding的缩写，*可以是1-5，对应不同大小的间距）：

<div class="row">
  <div class="col-sm-4 text-center">
    <div class="p-3 bg-light">1</div>
  </div>
  <div class="col-sm-4 text-center">
    <div class="p-3 bg-light">2</div>
  </div>
  <div class="col-sm-4 text-center">
    <div class="p-3 bg-light">3</div>
  </div>
</div>

给列本身加水平间距 #

如果想让列与列之间直接拉开距离，用mx-*类（mx是margin-x的缩写，控制左右margin）：

<div class="row">
  <div class="col-sm-4 text-center mx-1">
    <div class="bg-light">1</div>
  </div>
  <div class="col-sm-4 text-center mx-1">
    <div class="bg-light">2</div>
  </div>
  <div class="col-sm-4 text-center mx-1">
    <div class="bg-light">3</div>
  </div>
</div>

方案2：Bootstrap 5专用的Gutter类 #

如果你用的是Bootstrap 5，直接给row加g-*类就能一键设置列间距（g是gutter的缩写，*可选1-5，也可以用gx-*单独控制水平间距，gy-*控制垂直间距）：

<div class="row g-3">
  <div class="col-sm-4 text-center">
    <div class="bg-light">1</div>
  </div>
  <div class="col-sm-4 text-center">
    <div class="bg-light">2</div>
  </div>
  <div class="col-sm-4 text-center">
    <div class="bg-light">3</div>
  </div>
</div>

方案3：自定义CSS类（适合特殊需求） #

如果你一定要用自己的row_padding类，记得补充对应的CSS样式，还要调整row的负margin避免页面溢出：

/* 给row调整负margin，抵消列的margin */
.row_padding {
  margin-right: -10px;
  margin-left: -10px;
}
/* 给列加左右margin实现间距 */
.row_padding .col-sm-4 {
  margin-right: 10px;
  margin-left: 10px;
}

然后HTML保持你原来的结构就行，但记得不要嵌套col，把内部的col-sm-11换成普通div：

<div class="row row_padding">
  <div class="col-sm-4 text-center">
    <div>1</div>
  </div>
  <div class="col-sm-4 text-center">
    <div>2</div>
  </div>
  <div class="col-sm-4 text-center">
    <div>3</div>
  </div>
</div>

最后提醒下：尽量避免在col里面嵌套col，这种写法很容易导致布局错位，Bootstrap的栅格设计是row包含col，col内部放内容容器才是正确的打开方式~

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