responsive-design - 具有不同 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 无法正确堆叠这些元素。

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