砌体似乎覆盖引导默认响应列宽

Question

以下是一个基本的砌体示例：
https://jsfiddle.net/Smartix/n5ks39LL/

如您所见，我有一个 '.masonry-wrapper' 行，其中包含 4 个 '.col-sm-6' div。
因此（根据标准引导行为）在 xs 屏幕尺寸下，4 个 div 应该扩展为 100% 宽度并在另一个下堆叠。基本上他们应该表现得像 4 col-xs-12 divs!!
但是，因为这些列的内容很少，Masonry 自行决定它们的宽度应该等于它们的内容！！

如果你看一下小提琴，你会发现只有 div 4 表现得像一个真正的 col-xs-12（因为它有一行足够长的文本）

HTML：

<div class="container">
<div class="row masonry-wrapper">
    <div class="col-sm-6 item bc1">
        <p>Div 1</p>
    </div>
    <div class="col-sm-6 item bc2">
        <p>Div 2</p>
        <p>Div 2</p>
        <p>Div 2</p>
        <p>Div 2</p>
    </div>
    <div class="col-sm-6 item bc3">
        <p>Div 3</p>
    </div>
    <div class="col-sm-6 item bc4">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed hendrerit nisi. Donec vehicula magna eu tellus bibendum vehicula. Fusce tempus tellus purus, sed porta.
        </p>
    </div>

</div>
</div>

JS：

var $container = $('.masonry-wrapper');
$container.masonry({itemSelector: '.item'});

CSS：

.bc1 {background-color: #00bfb2;}
.bc2 {background-color: #de9800;}
.bc3 {background-color: #ff69da;}
.bc4 {background-color: #38ff59;}

这是错误还是配置错误？

Answer 1

您需要声明您的 .item 样式。

例如：

.item { width: 50%; } // 50% is equal to col-sm-6

要适用于两种设备尺寸，请在媒体查询中添加mobile first 行为。 https://jsfiddle.net/nx6mjkqr/

旧

或者，您可以将 js 代码更改为：

$container.masonry({itemSelector: '.col-sm-6'});

但这仅适用于窗口大小为sm。