使用jQuery的Bootstrap 3 Equal Height列需要js的帮助

我一直在使用jQuery的这个位（ jQuery等高响应div行 ）来获得相同的高度并且它工作得非常好，但如果使用相同的模式，它使用BS2和BS3，它不扫描行以达到相同的高度，它会扫描页面本身，然后同一页面上的所有图案（行> col- – ）都会获得页面上最高的高度。 这不是理想的实施。

http://jsbin.com/aVavuLeW/14/

上面的JSBin有一个使用BS3列（它的副本）的例子。 您不能在堆叠点的列上具有相对位置，因此为了此Bin的目的已复制这些位置。 如您所见，如果您在每一行上创建一个不同的类（在此示例中为.foo和.foo2），然后列表现出来，但如果您决定使用相同的模式，则页面上最高的高度将接管。

问题：如何解决使用相同模式的问题，它是根据页面而不是行计算的？

谢谢！！！

Answer 1

如果我正确理解你希望每一行具有相同的高度，基于最高的div，而每行具有相同的类名值，例如foo那么下面的代码就是这样做的。 我们的想法是检查已resize的元素的父级以及父级是否已更改，即调整第二个div.row div的大小时，然后应用更改并重置最大高度值。 为了使用指定的父级，引入了一个参数来指定父级选择器。 http://jsbin.com/uBeQERiJ/1

 $.fn.eqHeights = function(options) { var defaults = { child: false , parentSelector:null }; var options = $.extend(defaults, options); var el = $(this); if (el.length > 0 && !el.data('eqHeights')) { $(window).bind('resize.eqHeights', function() { el.eqHeights(); }); el.data('eqHeights', true); } if( options.child && options.child.length > 0 ){ var elmtns = $(options.child, this); } else { var elmtns = $(this).children(); } var prevTop = 0; var max_height = 0; var elements = []; var parentEl; elmtns.height('auto').each(function() { if(options.parentSelector && parentEl !== $(this).parents(options.parentSelector).get(0)){ $(elements).height(max_height); max_height = 0; prevTop = 0; elements=[]; parentEl = $(this).parents(options.parentSelector).get(0); } var thisTop = this.offsetTop; if (prevTop > 0 && prevTop != thisTop) { $(elements).height(max_height); max_height = $(this).height(); elements = []; } max_height = Math.max(max_height, $(this).height()); prevTop = this.offsetTop; elements.push(this); }); $(elements).height(max_height); }; // run on load so it gets the size: // can't have the same pattern for some reason or it scans the page and makes all the same height. Each row should be separate but it doesn't work that way. $(window).load(function() { //$('[class*="eq-"]').eqHeights(); $('.foo [class*="eq-"]').eqHeights({parentSelector:'.foo'}); /*$('.foo2 [class*="eq-"]').eqHeights();*/ });