logo标签列表

缩略图画廊与Bootstrap

twitter-bootstrap
3

我正在尝试使用Twitter Bootstrap制作一个缩略图库（2x2），但我没有得到想要的效果。在第二行开始，每行的第一个缩略图应用了左边距，使其每行只适合一张图片。

问题

代码：

    <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>
2个回答
5
更好的解决方案可能是给所有span6添加内联样式"style":"margin-left:0px;"，这将为您提供所需的输出，而无需使用多行。
使用此方法的一个优点是，您不需要切割数组。尽管大多数编程语言可以轻松处理数组切片（将包含30个元素的列表切片为包含每个都包含3个列表的10个列表），但如果您正在尝试使用Javascript在客户端执行某些操作，则可能会很困难。
我尝试了这种方法，并且对我有效：基本上，我正在尝试编写一个JavaScript函数来处理JSON数据以显示缩略图。
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>​
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接