bootstrap3グリッドを使って石積みにガターを追加してください。

Question

ブートストラップ3グリッドを使って石積みのガターをコーディングするのに問題があります。

これは私のjsfiddleです。 https://jsfiddle.net/shelly_W/bg67fdjm/

<div class="container bg"> 
<h1>Masonry - Bootstrap 3 grid media queries</h1> 
<!-- add extra container element for Masonry --> 
<div class="grid"> 
<div class="grid-sizer col-xs-6 col-sm-4"></div> 
<div class="grid-item col-xs-12 col-sm-8 col-md-8 "> 
<!-- add inner element for column content --> 
<div class="grid-item-content grid-item-content--height400">1</div> 
</div> 
<div class="grid-item col-xs-12 col-sm-4 col-md-4"> 
<div class="grid-item-content grid-item-content--height230">2</div> 
</div> 
<div class="grid-item col-xs-12 col-sm-4 col-md-4"> 
<div class="grid-item-content grid-item-content--height443">3</div> 
</div> 
<div class="grid-item col-xs-12 col-sm-4 col-md-4"> 
<div class="grid-item-content grid-item-content--height230">4</div> 
</div> 
<div class="grid-item col-xs-12 col-sm-4 col-md-4"> 
<div class="grid-item-content grid-item-content--height518">5</div> 
</div> 
<div class="grid-item col-xs-12 col-sm-4 col-md-4"> 
<div class="grid-item-content grid-item-content--height518">6</div> 
</div> 
<div class="grid-item col-xs-12 col-sm-4 col-md-4"> 
<div class="grid-item-content grid-item-content--height230">7</div> 
</div> 
<div class="grid-item col-xs-12 col-sm-8 col-md-8"> 
<div class="grid-item-content grid-item-content--height230">8</div> 
</div> 
</div> 

ソースは次のとおりです。https://masonry.desandro.com/

私は何を達成しようとしていることは石工グリッド間の15のピクセルの側溝を持っています。グリッド1とグリッド2の間にスペースを作成したい。グリッド1またはグリッド2の外側のコンテナdivエッジのいずれかにパディングしたくない。 jsで15pxガターを挿入しようとしたが、この方法ではブートストラップ応答列。

私はしばらくこの問題を解決しようとしてきましたが、正しいアプローチを見つけられません。どのように私はこの問題を解決するかもしれないかに関する提案を誰かが持っていますか？

詳細情報が必要な場合はお知らせください。 ご協力いただきありがとうございます！

Answer 1

セレクタ.grid-sizeセレクタで現在のpaddingの宣言を削除し、代わりにmargin-bottomを使用するだけで済みます。

.grid-size { 
    margin-bottom: 4%; 
} 

好きな場合は静的な値を使用できます。私はここでパーセンテージを使用しました。なぜなら、レスポンシブなデザインになるからです。

ここにはfiddle updatedが表示されています。

Answer 2

エッジまで完全に行き渡り、15pxガターを維持するソリューションを希望する場合は、パディングを維持してCSS calc()メソッドを使用して反応性のあるコンテナを調整できます。

.grid-sizer { width:calc(33.33% - 10px); } 
.grid-item { width: calc(33.33% - 10px); } 
.grid-item--width2 { width: calc(66.66% - 5px); } 

次に、あなただけの応答項目の幅を変更するには、CSSにメディアクエリを追加する必要があります。

@media (max-width: 500px) { 
    .grid-sizer { width:calc(50% - 7.5px); } 
    .grid-item { width: calc(50% - 7.5px); } 
    .grid-item--width2 { width: 100%; } 
} 
@media (max-width: 350px) { 
    .grid-sizer { width:100%; } 
    .grid-item { width: 100%; } 
} 

はこのバイオリンをチェックアウト： JSFiddle