带引导程序的缩略图库

Question

我正在尝试使用 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>

Answer 1

更好的解决方案可能是为所有 span6 "style":"margin-left:0px;" 提供内联样式 这将在不使用多行的情况下为您提供所需的输出。

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

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