Question

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

the problem

代码：

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

Answer 2

多行怎么样？代码如下; fiddle here

<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>

带引导程序的缩略图库

2 个答案: