具有不同 Bootstrap 3 响应列类的砌体

Question

我有这些列，砌体在某些阶段做得很好，但是当屏幕“超小”时，它无法将最后一个列保留在 col-xs-6。

<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-6 col-md-3"></div>
<div class="col-xs-6 col-md-3"></div>

这对屏幕尺寸中等+有好处

这在屏幕尺寸小方面做得很好

这是坏的最后两列应该是6而不是12

Answer 1

在这里，您可以使用引导程序和砌体对这些元素进行处理。 Bootstrap 在元素上使用媒体查询并更改它们的宽度并在窗口更改时以不同的方式堆叠它们。 Masonry 正在尝试通过将元素彼此相邻堆叠来做类似的事情，因为 bootstrap 使较小尺寸的元素更宽，masonry 无法正确堆叠这些。

专业提示：如果您将元素背景从主体背景更改为对调试有很大帮助，这样您就可以看到前景元素的实际大小。