5

div thumbnailsブートストラップを使用して、高さの異なるグリッドを作成しています。コードは、次の構造に従うものです。

<div class="row">
    <ul class="thumbnails">
        <li class="span4">
            <div class="thumbnail">
                content here
            </div>
        </li>
        <li class="span4">
            <div class="thumbnail">
                content here
            </div>
        </li>
        <li class="span4">
            <div class="thumbnail">
                content here
            </div>
        </li>
    </ul>
</div>

もちろんそれぞれthumbnail内容も違うし、結果として身長も違います。私が得るものはこれです：

ここに画像の説明を入力

ご覧のとおり、1 番目と 2 番目の間には、美学に反する空虚な空虚な空間があります。これは正常ですか？私が書いているコードは適切に構造化されていますか? どうすればこの動作を回避できますか? 3 つのサムネイルごとに行を追加し、行を閉じてさらに 3 つのサムネイルを挿入するのが正しいというヒントを読みました。しかし、私はそれをするのは正しいことではないと思います. 何も積み重ねることができず、bootstrap. どんな提案でも大歓迎です:-)

4

1 に答える 1

8

はい、その動作は想定されています。jQuery Isotope ( https://github.com/desandro/isotope ) やMasonry などのプラグインを使用して、空白を画像で埋めることができます。

Isotope + Bootstrap サムネイルのデモは次のとおりです。

http://bootply.com/61482

于 2013-09-27T13:28:45.263 に答える