Question

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

正如您所看到的，我有一个＆。39.masonry-wrapper＆＃39;包含4＆＃39; .col-sm-6＆＃39;的行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/

<强> OLD

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

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

但这只适用于窗口大小为sm的情况。

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

1 个答案: