2

我在使用带有流体容器和 jquery masonry 插件的 twitter bootstrap（新版本 3.0.1）的网格时遇到问题。

默认情况下（1200px 宽度），每行应该有 3 个元素。如果我从 4 col-xs-3 元素开始，一切正常（参见评论中的示例）。但我的问题是从 col-xs-6 / col-xs-3 / col-xs-3 开始。

这个问题可以在这里看到：http: //jsfiddle.net/andre1404/97eHr/1/

不工作：

<div class="post col-xs-6">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-6">
            <img src="http://placehold.it/400x400" />
        </div>

工作正常：

<div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-6">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

        <div class="post col-xs-3">
            <img src="http://placehold.it/400x400" />
        </div>

有任何想法吗 ？？？

4

1 回答 1

0

尝试使用ColumnWidth参数。将脚本更改为：

$(document).ready(function () {
    var container = $('#posts');

    container.masonry({
        gutter: 0,
        itemSelector: '.post',
        columnWidth: 3
    }); 
});

这似乎达到了预期的效果。

于 2013-11-05T11:54:19.387 回答