Question

我在使用bootstrap3网格编码砌筑上的装订线时遇到了麻烦。

这是我的傻瓜。 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插入一个15px的排水沟，但这种方法打破了自举响应列。

我一直试图解决这个问题，但我无法找到正确的方法。有没有人对如何解决这个问题有任何建议？

如果您需要任何进一步的信息，请与我们联系。提前感谢您的帮助！

Answer 1

您只需删除padding选择器上的当前.grid-size声明，然后使用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

使用bootstrap3网格在砌体上添加装订线

2 个答案: