ブートストラップ3：行の末尾にある列から下の余白を削除します

Question

私は複数の列を持つグリッドを持っています。すべての列が1つの行にあり、列の数が異なる場合があります。

カラム間に垂直なスペースが必要なので、カラムに余白を付けました。

しかし、私はラッパーと列の間に等しいスペースが必要なので、行の最後のいくつかの列で余白を削除する必要があります。

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

@Antonio、あなたはjQueryの/ JavaScriptを使用して得た動的ボトムマージンを除去するために：

ここでフィドルです。適切なイベントでmargin-bottom：0pxのクラスを追加します。

例：

CSSコード：

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

JavaScriptのコード：

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

OR

[ラッパーにIDを追加することを確認してください]

のjQueryコード：

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

すべてです。

幸運&希望に役立ちます。

Answer 3

助けることができるあなたは、列の数、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; 
    } 
} 

はEDIT：再びhttps://jsfiddle.net/rhhyu6h2/8/

、これだけ特定のために：更新、あなたの効果でこれを表示するようにいじっレイアウト。可変列レイアウトの場合は、ラッパーまたはJSを使用して解決する必要があります。 https://jsfiddle.net/rhhyu6h2/9/
これは新しいHTMLを必要としません。