Bootstrap 3网格在每个项目不同的高度 - 它是可解决只使用CSS？ [英] Bootstrap 3 grid with different height in each item - is it solvable using only CSS?

问题描述

我试图制作一个缩略图网格，其中每个缩略图都有一个图像和一个标签。如果所有标签具有相同的长度，则所有缩略图具有相同的高度：

I'm trying to make a grid of thumbnails, where each thumbnail has an image and a label. It works fine if all the labels have the same length, because then all the thumbnails have the same height:

http://www.bootply.com/iSqwWyx5ms

但是，如果我缩短最右边的缩略图文本，下面一行被推入一个新行，如下所示：

However, if I shorten the rightmost thumbnail's text, part of the row below gets pushed into a new row, as shown here:

http：// www。 bootply.com/Wqd021aaeM

我想要的是从第一行结束的最低点开始的第二行。

What I would like is the second row to start from the lowest point in which the first row ended.

我知道我可以用JavaScript解决它 - 在每一行中找到最长的缩略图，并设置其他缩略图具有那个高度。问题是，我有什么办法做，或者其他可以解决我的问题，只使用CSS？

I know I can solve it with JavaScript - find the longest thumbnail in each row and set the other thumbnails to have that height. Question is, do I have any way of doing it, or something else that can solve my problem, using only with CSS?

更新：我不知道如何许多项目我在一行。例如，在一个小屏幕上，我会有两个项目在一行，而在一个更大的屏幕上，它将是3，所以解决方案，当一个新行开始时设置不利于我。

Update: I don't know beforehand how many items I have in one row. For example, on a small screen I'd have 2 items in a row, while on a bigger screen it'll be 3, so solutions which set when a new row starts aren't good for me.

推荐答案

您应该使用 .clearfix ，如Bootstrap文档中的Grid responsive resets部分所述： http://getbootstrap.com/css/#grid-responsive-resets

You should use .clearfix, as described at the Grid responsive resets section of the Bootstrap documentation: http://getbootstrap.com/css/#grid-responsive-resets

这篇关于Bootstrap 3网格在每个项目不同的高度 - 它是可解决只使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！