Bootstrap 3：从行底部的列中删除底部边距

Question

我有一个包含多列的网格。所有列都在一行中，列数可能会有所不同。

由于我在列之间需要一些垂直空间，因此我在列上添加了margin-bottom。

但是，我想在包装器和列之间使用相等的空间，所以我需要删除行中最后几列的margin-bottom。

See sample here: https://jsfiddle.net/aucovic/rhhyu6h2/6/

如何动态删除最后几列的底部边距？

<style>
.wrapper {
  background:#000;
  padding:10px;
}

.box {
  background: #fff;
}

.mb {  
  margin-bottom:10px;
}
</style>


<div class="wrapper">
  <div class="row">
    <div class="col-md-4 col-xs-6 mb">
      <div class="box">
        Box 1
      </div>
    </div>
    <div class="col-md-4 col-xs-6 mb">
      <div class="box">
        Box 2
      </div>
    </div>
    <div class="col-md-4 col-xs-6 mb">
      <div class="box">
        Box 3
      </div>
    </div>
    <div class="col-md-4 col-xs-6 mb">
      <div class="box">
        Box 4
      </div>
    </div>
    <div class="col-md-4 col-xs-6 mb">
      <div class="box">
        Box 5
      </div>
    </div>
  </div>
</div>

Answer 1

好吧，如果你想要包装器有一些填充，超级快速修复就是将底部填充设置为相等（初始填充 - 列的底部边缘）。在你的例子中，你的包装器就是padding-bottom: 0。这绝对不是一个终极修复，但它非常简单，适用于描述的情况。

这是一个小提琴：https://jsfiddle.net/kLr8sog6/

Answer 2

假设您没有更改列数，第n个子选择器可以提供帮助：

//mobile and tablet view
@media(max-width:992px) {
    .mb:nth-last-child(-n+2) {
        margin-bottom:0px; 
    }
}
//wider views
@media(min-width:993px) {
    .mb:nth-last-child(-n+3) {
        margin-bottom:0px; 
    }
}

编辑：更新了您的小提琴以显示此效果：https://jsfiddle.net/rhhyu6h2/8/

同样，仅适用于此特定布局。对于变量列布局，您必须在包装器中或通过JS解决。

EDIT2：通过阅读您的其他评论，您可以在选择性行上使用包装器调整类：https://jsfiddle.net/rhhyu6h2/9/
这不需要任何新的HTML。

Answer 3

@Antonio，为了动态删除底部边距，你必须使用jQuery / JavaScript。在适当的事件中添加具有margin-bottom的类：0px。

示例：

CSS代码：

.removeBottomPadding{
margin-bottom:0px !important; 
}

JavaScript代码： [确保向包装器添加ID]

window.onload = function() {
document.getElementById('wrapper').className = 'removeBottomPadding';
};

或

jQuery代码：

$(function() {
$('.wrapper').addClass('removeBottomPadding');
});

这就是全部。

祝你好运＆amp;希望有所帮助。