Twitter bootstrap 具有可变高度的引导行元素

我目前正在开发一个使用Twitter引导的网站

我的情况是： 包含多个元素的单个.row元素。具有可变高度的列XX XX（具有可变图像比率的产品图像）

我的设计中的列数因视口大小而异，这使我无法通过创建几个.row包装器来分离元素

由于元素的单独图像，每个元素具有可变高度。如果某个大元素作为实际行中的第一个出现，则可能会出现没有元素的大空白区域（用红色标记）

我唯一的解决方案是设置列表中元素的预定义高度，以确保在显示下一个元素（新行上）时不会发生“跳跃”

我还尝试使用javascript，找到元素的最大值，然后将所有元素设置为该高度，但是这是一个糟糕的解决方案，因此图像高度的巨大差异也会产生较大的空白区域

---

有人有解决这个问题的好办法吗

在约瑟夫·凯西的帮助下，我找到了一个解决办法

CSS:flexbox

通过使用此链接中介绍的样式：

我使用了以下样式：

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的浏览器支持列表：

---

需要注意的是：在GoogleChrome43中，元素的第一行将最后一个元素向下移动到下一行（第一行的最后一列为空），但在所有后续行中，所有列都被很好地填充。我还没有找到任何解决方案。

这看起来像是FLEX的工作！你想要这个->？ccdiego5>不，这是一个非常静态的例子。约瑟夫·凯西>看起来不错！我将尝试实现它，看看它是否能按预期工作！