具有可变高度的Bootstrap行元素

Question

我目前正在使用Twitter Bootstrap开发一个网站.

我的情况:单个.row元素包含多个元素.col-XX-XX,高度可变(产品图像具有可变图像比率)

我的设计中的列数从视口大小到视口大小不等,这会禁用我只是通过创建几个.row包装器来分隔元素.

由于元素的个体图像,每个元素具有可变高度.如果大元素在其出现的实际行中首先出现,则可以显示没有元素的大空白区域(标记为红色).

我唯一的解决方案是在列表中设置元素的预定义高度,以确保在显示下一个元素(在新行上)时不会发生"跳跃".

我也尝试使用javascript,找到元素的最大值,然后将所有元素设置为此高度,但这是一个不好的解决方案,因此大量的图像高度也会创建大的空白区域.

有没有人有一个很好的解决这个问题的方法？

Answer 1

在Joseph Casey的帮助下,我找到了解决方案.

CSS:flexbox

使用此链接中说明的样式:http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

我使用了以下样式:

CSS

.row{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row .item{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

这实现了元素很好地对齐.

最新的浏览器支持这些样式.我在这里找到了flexbox的浏览器支持列表:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

一点注意事项:在Google Chrome 43中,第一行元素将最后一个元素向下移动到下一行(第一行的最后一列为空),但在所有后续行中,所有列都会很好地填充.我还没有找到任何解决方案.