在bootstrap css中垂直对齐缩略图？

Question

我认为这应该很简单，但我无法让它发挥作用。在ASP.NET MVC中，我有一个像这样的项目列表：

<div id="FilmListContent" class="row">
    <div class="span12">
        <ul class="thumbnails">
            @foreach (var film in Model.Films)
            {
                <li class="span4">
                    <div class="thumbnail">
                        <a href="@Url.Action("Details", "Films", new { id = film.ID })">
                            <img src="@(String.Format("../../Content/Uploads/{0}.jpg", new object[] { FileUpload.CheckImageExists(Server.MapPath("~/Content/Uploads/"), film.ID) ? "Image_Film_" + film.ID : "NoImage" }))" alt="@film.Title image" />
                            <span>
                                @film.Title (@film.Year, @film.MediaType_Name) </span></a>
                    </div>
                </li>
            }
        </ul>
    </div>
</div>

生成一个包含每行3个项目的好列表，但是当@film.Title等内容包装到下一行时，我在下一行得到一个空位置。像这样：

我尝试过显示：table-cell，vertical align text-bottom等，但我无法让它发挥作用。目前我已经删除了缩略图上的所有CSS。无论大小，我可以使用什么css来获得每行3件物品？或者我需要修改尺寸吗？

Answer 1

这是由缩略图的高度变化引起的。 clear：left / clear：两者都可以工作但是盒子的高度仍然不一样（这是一个小细节）。

此外，如果做响应式布局，在每三个缩略图之后放一个清除就会搞砸了。

另一种解决方案是确保缩略图内容的高度。有很多方法可以做到这一点。在这个例子中：

1）要么有溢出：隐藏文本溢出：省略号和带有全文的跨度上的可选标题属性。 2）在变体文本上设置一个高度，允许包含两行（或更多）文本（甚至很可能是溢出：隐藏）

基本上，您需要自己管理高度并确保每个盒子的高度相同。

Answer 2

假设您使用float: left来布置项目，您可以在每组三个项目之后插入一个clear: both的元素，以确保每一行完全位于前一行之下。