twitter-bootstrap - 带有 Bootstrap 的缩略图库

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 数据以显示为缩略图。