3

我正在尝试使用 twitter bootstrap 制作缩略图库（2x2），但我没有得到想要的效果。在每行的第一个缩略图中，从第 2 行开始，应用于左边距，使其每行仅适合一个图像。

问题

编码：

    <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;" 提供内联样式 这将为您提供所需的输出，而无需使用多行。

使用它的一个优点可能是您不需要对数组进行切片。尽管大多数编程语言都可以轻松处理数组的切片（将 30 个元素的列表切片为 10 个元素的列表，其中每个元素将包含 3 个列表），但如果您尝试使用 Javascript 在客户端做某事，这将很困难。

我尝试了这种方法并为我工作：基本上我试图在 javascript 中编写一个函数来处理 json 数据以显示为缩略图。

于 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 回答