2

私はいつもこの問題に遭遇しているようで、ブートストラップの第一人者からのアドバイスが欲しいです。

次のjsfiddleは問題を示しています。これは、親コンテナーに行流体があり、サムネイルの最初の行のみが正しく配置され、残りが挿入されているためです (つまり、3 番目のサムネイルが最初のサムネイルの真下に配置されていません)。

コードは次のとおりです。

<div class="container row-fluid">
    <div class="span6">
        <p>som content here</p>
    </div>
    <div class="span6">
        <ul class="thumbnails">
            <li class="span6">
                <div class="thumbnail">
                    <img src="http://placehold.it/150x100" />
                </div>
            </li>    
            <li class="span6">
                <div class="thumbnail">
                    <img src="http://placehold.it/150x100" />
                </div>
            </li>    
            <li class="span6">
                <div class="thumbnail">
                    <img src="http://placehold.it/150x100" />
                </div>
            </li>    
        </ul>
    </div>
</div>
4

2 に答える 2

5

これは Bootstrap の既知の問題/バグであることが判明しました。現在の回避策は、次のようなものを css に追加することです。これはうまく機能することを確認できます。

li.thumbfix.span12 + li { margin-left : 0px; }
li.thumbfix.span6:nth-child(2n + 3) { margin-left : 0px; }
li.thumbfix.span4:nth-child(3n + 4) { margin-left : 0px; }
li.thumbfix.span3:nth-child(4n + 5) { margin-left : 0px; }
li.thumbfix.span2:nth-child(6n + 7) { margin-left : 0px; }
li.thumbfix.span1:nth-child(12n + 13) { margin-left : 0px; }

元の修正にはサムフィックスは含まれていませんでしたが、このクラスを追加して、壊れたサムネイル リストを具体的にターゲットにして、問題に悩まされていないリストをそのままにしておくことができます。

于 2013-06-20T11:58:16.560 に答える
0

1 つの span6 要素内に 3 つの span6 要素があります。スペースがないため、3 番目のサムネイルが折り返されています。これが表示される理由です。論理的に整理するために行を設定していません。これを試してください。

<div class="container row-fluid">
    <div class="row">
        <div class="span6">
            <p>some content here</p>
        </div>
        <div class="span6">
            <ul class="thumbnails">
                <li>
                    <div class="thumbnail">
                        <img src="http://placehold.it/150x100" />
                    </div>
                </li>
                <li>
                    <div class="thumbnail">
                        <img src="http://placehold.it/150x100" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="span6 offset6">
            <ul class="thumbnails">
                <li>
                    <div class="thumbnail">
                        <img src="http://placehold.it/150x100" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
于 2013-06-18T13:02:25.633 に答える