具有不同的圖像大小

Question

自舉響應電網的問題，這是我的自舉電網： http://i59.tinypic.com/nozn12.png

每個圖像都有不同的大小，不幸的是，heightest一個包裹行留下一個空的空間。 我應該在每幅圖像中給出相同的尺寸，但我不能，因爲這不是一個固定的佈局。

這個問題有沒有解決方案？下面的代碼

<div class="row"> 

     <div class="col-sm-6 col-md-3"> 
      <div class="thumbnail"> 
       <img src="temp/1.jpg" class="img-responsive"> 
       <h4>4280/5PL</h4> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-3"> 
      ecc. 
     </div> 

     <div class="col-sm-6 col-md-3"> 
      ecc. 
     </div> 
</div> 

Answer 1

採用等高度<div class="col-sm-6 col-md-3">

$.fn.eqHeights = function(options) { 

    var defaults = { 
     child: false 
    }; 
    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 = []; 
    elmtns.height('auto').each(function() { 

     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(); 
$('.foo2 [class*="eq-"]').eqHeights(); 

    }); 

使用<div class="row foo">爲<div class="row">

，並添加EQ-COL-SM-6 EQ-COL-MD-3類所有div-col-sm-6 col-md-3

here DEMO