Html 引导缩略图网格赢得'；不要填满多余的空间

我在bootstrap中有一个缩略图列表，它需要排列成一个网格，填充上面的空间。这个JSFIDLE显示了现在的问题：li项之间的间距非常奇怪

这是基本框架。带有类缩略图的ul，然后是带有类缩略图和填充span3的lis，以添加固定宽度

缩略标签
地方、国家

缩略标题




缩略标签
地方、国家

缩略标题

你知道如何让缩略图填充顶部的空间吗？看起来右边的那个做得很好，但其他的都在下面

---

提前感谢

试着把你的窗口变大，你会看到更多的窗口进入顶部。你希望每行有三个或四个缩略图吗？我希望每行有四个，但它们需要填充上面的空间，因为有些图像较短。因此，它们不需要严格按行排列，只需要相同的宽度和不同的间距，这取决于它们上面的图像有多高。很抱歉，我不知道如何使用引导缩略图使图像像那样堆叠。一个选择是强制在4之后添加一个新行，然后如果在底部添加较小的图像，看起来会更好一些。如本例所示，希望其他人知道如何使缩略图填满空间。

<ul class="thumbnails">
<li class="paddedspan3">
    <div class="thumbnail"><img alt="" src="http://www.cedarville.edu/~/media/Images/PhotoGallery/Alumni-BasketBall2012/abw-12_101.jpg?w=268" id="one"/>
<h3>Thumbnail label</h3>
<p><i class="icon icon-map-marker"></i>Place, Country</p>
<p>Thumbnail caption...</p>
<p><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p>
</div>
</li>
<li class="paddedspan3">
<div class="thumbnail"><img alt="" src="http://www.cedarville.edu/~/media/Images/PhotoGallery/Alumni-BasketBall2012/abw-12_103.jpg?w=268" id="two"/>
<h3>Thumbnail label</h3>
<p><i class="icon icon-map-marker"></i>Place, Country</p>
<p>Thumbnail caption...</p>
<p><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p>
</div>
</li>