使用 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%;
}

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

在这里，您可以看到您的 fiddle updated 并在行动中。

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