javascript - 如何使 Bootstrap 缩略图大小相同，即使在调整窗口大小后也是如此？

Question

我正在使用 bootstrap，我在一个 div 中有一些缩略图，我想动态调整它们的大小以使其高度相等。我在 stackoverflow 上找到了两个脚本来执行此操作:

选项 1 ( bootply example )

    function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
 } 

  $(document).ready(function() {   
    equalHeight($(".equalize")); 
  });

选项 2 ( bootply example )

 $(document).ready(function() {
    var maxHeight = 0;          
    $(".equalize").each(function(){
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });         
    $(".equalize").height(maxHeight);
  }); 

但都不能完全解决我的问题。如果您调整窗口大小(通过断点，因此包含缩略图的列宽会发生变化)，内容会溢出缩略图。您可以在我的 bootply 示例中对此进行测试。

我想我需要添加一个 EventHandler，例如 window.onresize 或其他东西，但我无法让它工作。我在哪里以及如何将其添加到 javascript 文件中？我真的是 JS 的新手，所以我非常感谢您能提供的任何帮助!

Answer 1

我决定使用 Flexbox 来解决这个问题。 javascript 建议不起作用，因为原始函数写入对象的高度并且不会在调整大小时覆盖该高度(我认为是因为在初始加载之后，对象然后具有设置的高度)。

这是解决问题的 Flexbox 代码 ( codepen demo )

HTML

<div class="row equalize-row">
    <div class="col-md-3 col-xs-6 equalize">
        <div class="thumbnail">
        ...
        </div>
    ...
    </div>
</div>

CSS

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

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