使用Bootstrap中的.thumbnail类修复图像周围的间距？

Question

我正在使用bootstrap v2.3.1，我正在尝试了解如何修复我的一张图片。

在下面的示例图像链接中，顶部图像是我希望所有图像在屏幕调整到最小尺寸（手机大小）时的样子，底部图像是给我一个问题：

http://i.imgur.com/BH02ONQ.jpg

由于某种原因，它在第二张图像的两侧有比它应有的更多的空间。

（注意：我的屏幕截图被更改为显示正确的图像和错误的图像。下面的代码是我实际使用的代码）

我的代码是：

<section>
    <ul class="thumbnails">
        <li>
            <a class="thumbnail" rel="group" href="images/r1.jpg">
                <img src="images/thumbnails/r1s.jpg" alt="" />
            </a>
        </li>
        <li>
            <a class="thumbnail" rel="group" href="images/r2.jpg">
                <img src="images/thumbnails/r2s.jpg" alt="" />
            </a>
        </li>
    </ul>
</section>

所以我不知道CSS文件中的某个设置是否存在问题，但由于我使用的是.thumbnail类，我猜它与此有关吗？

有没有人知道如何制作它，以便在使用.thumbnail类时我的图像周围没有额外的空间？

Answer 1

我的解决方案是将CSS设置为<ul class="thumbnails"> style="max-width: 100px"，其中100px是列表中图片的最小宽度尺寸。