2

流体コンテナーと jquery masonry プラグインを使用した twitter ブートストラップ (新しいバージョン 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 に答える