使用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/

我要实现的目标是在砖石网格之间具有15像素的装订线。 我想在网格1和网格2之间创建一个空间。我不想在网格1或网格2的外部容器div边缘上填充。我试图通过js插入15px装订线，但是这种方法打破了引导程序响应列。

我一直在努力解决这个问题，但是我找不到正确的方法。 有人对我如何解决此问题有任何建议吗？

如果您需要任何进一步的信息，请告诉我。 预先感谢您的帮助！

Answer 1

您要做的就是在.grid-size选择器上删除当前的padding声明，并使用margin-bottom代替。

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

如果愿意，可以使用静态值。 我在这里使用百分比是因为您要进行响应式设计。

在这里，您可以看到您的小提琴已更新并正在运行。

Answer 2

如果您想要一个一直延伸到边缘并保持15像素装订线的解决方案，则可以保留填充并使用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