使用bootstrap3网格在砌体上添加天沟

Question

我在使用bootstrap3网格砌体编码天沟时遇到问题。

这是我的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/

我试图做到的，是具有砌体电网之间15px的排水沟。我想在网格1和网格2之间创建一个空格。我不想在网格1或网格2的外部容器div边缘上填充任何内容。 我试图用js插入15像素的装订线，但此方法会打破引导响应列。

我一直在努力工作一段时间，但我无法弄清楚正确的做法。有没有人对我如何解决这个问题有任何建议？

如果您需要更多信息，请让我知道。 预先感谢您的帮助！

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