带砖石的 Bootstrap 3

Question

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

默认情况下（1200px 宽度），每行应该有 3 个元素。如果我从 4 col-xs-3 元素开始，一切正常（参见 cmets 中的示例）。但我的问题是从 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>

有什么想法吗？？？

Answer 1

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

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

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

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