Twitter-Bootstrap的动态行长度

Question

我正在创建模型,其内容看起来像一块板,有点像Pinterest.我正在使用Twitters-Bootstrap,并且在布局方面存在一些问题.

我有一个动态数量的元素,所以我想我可以只有一行,然后项目将包裹到下一行.然而,这在内容跨度之间创造了一个奇怪的空间(见下图).

我不是设计师,所以我的问题是,如果有一种方法可以使用一行显示所有内容块,仍然使用流体设计？

另一种方法是以编程方式添加行,但它似乎是样式表而非业务逻辑应该解决的问题.

代码如下所示:

<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>

Answer 1

使用带有媒体查询的CSS属性nth-child删除每行第一个元素的左边距 -

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

媒体查询在这里解释http://twitter.github.com/bootstrap/scaffolding.html

并且nth-child也用于Twitter Bootstrap.