Bootstrap 3 网格列统一设置15px内边距的可行方案咨询

这问题我用Bootstrap3做电商布局时也碰到过，反复加媒体查询和自定义类确实太繁琐。其实可以利用Bootstrap3栅格的原生特性，通过简单的CSS规则实现统一设置，同时避免上下行列内边距叠加的问题。

核心思路 #

Bootstrap3的.row默认自带左右负margin来抵消列的左右padding，我们可以把这个逻辑复制到垂直方向：

1. 给所有网格列统一设置上下15px内边距
2. 给.row设置负的底部margin，抵消上下行列的内边距叠加（避免出现30px的间距）

修改后的CSS代码 #

/* 保留你已有的水平gutter设置，同时添加上下内边距 */
.row [class*="col-"] {
  padding-right: 7.5px;
  padding-left: 7.5px;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* 抵消上下行列的padding叠加，确保垂直间距始终是15px */
.row {
  margin-bottom: -15px;
}

/* 可选：给最后一行添加这个类，避免底部出现负间距 */
.row-last {
  margin-bottom: 0;
}

优化后的HTML代码 #

现在你可以删掉所有自定义的top-pad-d、top-pad-m、column-top-pad类，直接用原生栅格类即可：

<!-- Section 4 -->
<div class="section padding-y">
  <div class="row">
    <div class="col-sm-4">
      <a href="#"><img src="http://placehold.it/400x427" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
  </div>
</div>

为什么这个方案可行？ #

• 所有col-*类都拥有了上下左右15px的内边距，满足你对列内边距的需求
• .row的margin-bottom: -15px会让下一行的.row向上偏移15px，刚好抵消上一行列的padding-bottom和下一行列的padding-top的叠加效果，最终列与列之间的垂直间距保持15px
• 因为你的.padding-y容器已经自带padding:15px，最顶部的列内边距会和容器padding自然衔接，不会出现多余间距
• 不需要任何媒体查询，这个规则对所有屏幕尺寸生效，完美适配移动端

补充说明 #

如果页面中存在最后一行的.row，可以给它添加.row-last类，避免底部出现负间距影响后续布局。

内容的提问来源于stack exchange，提问作者MK-DK