具有可变高度的Bootstrap行元素

Question

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

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

我的设计中的列数从视口大小到视口大小不等，这会禁用我只需使用创建多个.row包装器来分隔元素。

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

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

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

有没有人能解决这个问题呢？

Answer 1

在Joseph Casey的帮助下，我找到了解决方案。

CSS：flexbox

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

我使用了以下样式：

<强> CSS

function getRandomWithManyExclusions(originalArray,arrayOfIndexesToExclude){

   var rand = null;

   while(rand === null || arrayOfIndexesToExclude.includes(rand)){
         rand = Math.round(Math.random() * (originalArray.length - 1));
    }
     return rand;
  }

这使元素很好地对齐。

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

一点注意事项：在Google Chrome 43中，第一行元素将最后一个元素向下移动到下一行（第一行的最后一列为空），但在所有后续行中，所有列都会很好地填充。我还没有找到任何解决办法。