3

twitterブートストラップを使用してサムネイルギャラリー（2x2）を作成しようとしていますが、目的の効果が得られません。各行の最初のサムネイルでは、2行目から左マージンに適用され、1行に1つの画像のみが収まるようになっています。

問題

コード：

    <div class="row-fluid">
        <div class="span6">
            <h2 id="clients">Clients</h2>

            <div class="row-fluid">
                <ul class="thumbnails">
                    <li class="span6">
                        <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                    </li>
                    <li class="span6">
                        <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                    </li>
                    <li class="span6">
                        <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                    </li>
                    <li class="span6">
                        <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="span6">
            <h2 id="testiominals">Testemunhos</h2>

            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
            </blockquote>

            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
            </blockquote>

            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
            </blockquote>
        </div>
    </div>
4

2 に答える 2

5

より良い解決策は、すべてのspan6 "style"： "margin-left：0px;"にインラインスタイルを与えることです。これにより、複数の行を使用せずに必要な出力が得られます。

これを使用する利点の1つは、アレイをスライスする必要がないことです。ほとんどのプログラミング言語は配列のスライスを簡単に処理しますが（30個の要素のリストを10個のリストにスライスし、それぞれに3個のリストが含まれます）、Javascriptを使用してクライアント側で何かを行おうとすると困難になります。

私はこのアプローチを試し、私のために働きました：基本的に私はサムネイルとして表示するjsonデータを処理するためにjavascriptで関数を書き込もうとしていました。

于 2013-01-18T08:13:44.373 に答える
1

複数の行はどうですか？以下のコード; ここでフィドル。

<div class="row-fluid">
    <div class="span6">
        <h2 id="clients">Clients</h2>

        <!-- First Row of Thumbs -->
        <div class="row-fluid">
            <ul class="thumbnails">
                <li class="span6">
                    <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                </li>
                <li class="span6">
                    <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                </li>
            </ul>
        </div>

        <!-- Second Row of Thumbs -->
        <div class="row-fluid">
            <ul class="thumbnails">
                <li class="span6">
                    <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                </li>
                <li class="span6">
                    <a href="#" class="thumbnail"><img src="http://placehold.it/220x100" alt=""></a>
                </li>
            </ul>
        </div>
    </div>

    <div class="span6">
        <h2 id="testiominals">Testemunhos</h2>

        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
        </blockquote>

        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
        </blockquote>

        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous <a href=""><cite title="Source Title">Source Title</cite></a></small>
        </blockquote>
    </div>
</div>​
于 2012-11-10T21:10:09.557 に答える