Bootstrap 4如何优雅实现行内列间的垂直像素间距？

嘿，其实Bootstrap早就有内置或者规范的方式解决这个需求啦，不用那些乱七八糟的临时方案！我给你分版本梳理几个靠谱的方法：

Bootstrap 5+ 直接用内置Gutter类 #

从Bootstrap 5开始，官方专门加了 g-* 系列类来控制列间距，完全符合你的需求！比如 g-3 对应的间距在默认字体下大概12px，接近你要的10px；如果想要更精准的10px，可以用自定义值 g-[10px]（Bootstrap 5.2+支持自定义数值类）。

修改你的代码如下，注意要把.content放在col内部，别直接挂在col上——不然会破坏Bootstrap的网格布局逻辑：

<div class="container">
  <div class="row g-3"> <!-- 这里加g-3控制间距 -->
    <div class="col-md-2">
      <div class="content">1 of 2</div>
    </div>
    <div class="col-md-10">
      <div class="content">2 of 2</div>
    </div>
  </div>
</div>

这样修改后，g-3 会自动调整col之间的内边距，形成均匀的间距，同时你的content样式也能完美生效，完全不用额外写冗余CSS。

Bootstrap 4 也有规范解决方案 #

如果你还在使用Bootstrap 4，虽然没有直接的gutter类，但可以用这两种优雅的方式：

• 自定义CSS变量（推荐）：Bootstrap 4支持通过CSS变量修改gutter值，直接给row加个自定义类就行：

.row.custom-gutter {
  --bs-gutter-x: 0.625rem; /* 刚好对应10px，默认字体下1rem=16px */
}

然后HTML里用 <div class="row custom-gutter"> 就行，其他结构和上面一样，把content放在col内部。

• 移除默认gutter加自定义内边距：给row加no-gutters去掉默认间距，然后给每个col设置左右各5px的padding，这样列之间就是10px的间距：

.row.no-gutters .col {
  padding-left: 5px;
  padding-right: 5px;
}

为啥不推荐直接给col加margin？ #

你搜到的那些临时方案很多是给col加margin，但这会破坏Bootstrap网格的核心逻辑：row本身有负margin来抵消container的padding，直接给col加margin会导致列溢出、响应式布局错乱，在不同屏幕尺寸下很容易出问题，所以绝对不推荐这种野路子。

按照上面的方法修改，既符合Bootstrap的规范，又能轻松实现你要的列间距，完全不用额外套多余的div～

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