4

我正在创建模型，其中的内容看起来像一个板，有点像 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>

4

1 回答 1

8

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

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

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

Twitter Bootstrap 中也使用了 nth-child。

于 2012-06-02T08:47:08.763 回答