css - Twitter-Bootstrap 的动态行长度

Question

我正在创建模型，其中的内容看起来像一 block 板，有点像 Pinterest。我正在使用 Twitters-Bootstrap，但在布局方面存在一些问题。

我有一个动态数量的元素，所以我想我可以只有一行，然后这些元素就会换行到下一行。然而，这会在内容跨度之间创建一些奇怪的空间(见下图)。

我不是设计师，所以我的问题是，是否有一种方法可以使用单行显示所有内容 block ，仍然使用流畅的设计？

另一种方法是以编程方式添加行，但这似乎是样式表而不是业务逻辑应该解决的问题。

代码如下所示:

<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

Twitter Bootstrap 中也使用了 nth-child。