4

ピンタレストに少し似た、ボードのようなコンテンツのモックアップを作成しています。Twitters-Bootstrap を使用していますが、レイアウトに問題があります。

私は動的な量の要素を持っているので、1行だけでいいと思っていました。アイテムは次の行に折り返されます。ただし、これにより、コンテンツスパン間に奇妙なスペースが作成されます（下の画像を参照）。

私はデザイナーではないので、1 つの行を使用してすべてのコンテンツ ブロックを表示する方法がある場合、まだ流動的なデザインを使用しているという質問がありますか?

別の方法は、プログラムで行を追加することですが、ビジネスロジックではなくスタイルシートが解決すべき問題のようです。

ここに画像の説明を入力

コードは次のようになります。

<div class="container-fluid">
<div class="row-fluid">
    <div class="span12">
        <li class="span3 pdt10">
            <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
                <div class="caption">
                    <h5>
                        Thumbnail label</h5>
                    <p>
                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                        porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>
                        <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
        <li class="span3 pdt10">
            <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
                <div class="caption">
                    <h5>
                        Thumbnail label</h5>
                    <p>
                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                        porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>
                        <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
        <li class="span3 pdt10">
            <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
                <div class="caption">
                    <h5>
                        Thumbnail label</h5>
                    <p>
                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                        porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>
                        <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
        <li class="span3 pdt10">
            <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
                <div class="caption">
                    <h5>
                        Thumbnail label</h5>
                    <p>
                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                        porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>
                        <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
        <li class="span3 pdt10">
            <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
                <div class="caption">
                    <h5>
                        Thumbnail label</h5>
                    <p>
                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
                        porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>
                        <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
    </div>
</div>

4

1 に答える 1

8

CSS プロパティ nth-child をメディア クエリで使用して、各行の最初の要素の左マージンを削除します。

.myclass > li:nth-child(4n+1) {
    margin-left: 0px;
}

メディア クエリについては、こちらで説明していますhttp://twitter.github.com/bootstrap/scaffolding.html

また、nth-child は Twitter Bootstrap でも使用されます。

于 2012-06-02T08:47:08.763 に答える