css - Bootstrap 缩略图网格未正确开始新行

Question

我的 Rails 应用程序中有一个缩略图网格，但我无法让 Bootstrap 正确显示网格!正如您在下面看到的，它没有正确地开始新的一行!不知道在这里做什么。我在下面包含了我的 HTML，据我所知它符合 Bootstrap 示例。

<div id="image-grid" class="col-lg-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
<div class="col-sm-6 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

Answer 1

这是一个高度问题。

我现在正在解决同样的问题，如果您想放弃无关的行容器，并且响应地将整组列网格化为一行，您基本上有两种选择:

1. 您可以通过使用 css 约束内容(或通过简单地控制被插入每个元素的内容)来确保网格中的所有元素具有相同的高度

2. 您可以在页面中添加一些 jQuery 代码来扫描缩略图元素，并将它们的容器扩展到与网格中最大元素相同的高度。在谷歌上搜索等高 jQuery 插件——有很多。您还需要确保自己做的另一件事是在调整大小时再次触发插件，因为由于允许内容扩展/收缩的响应行为，您的元素可能会再次以不同的高度结束。 bootstrap 的 col 类和一些 jQuery 高度平衡的组合对我来说效果很好。