Masonry 似乎覆盖了 bootstrap 默认响应列宽

Question

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

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

如果您查看 fiddle，您会发现只有 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'});

但这仅在 window 大小为 sm 时有效。

Masonry 似乎覆盖了 bootstrap 默认响应列宽

Masonry seems to override bootstrap default responsive column width

twitter-bootstrap

jquery-masonry