Bootstrap列不同高度動態網站

Question

我知道這個問題很常見，但我仍然沒有做到這一點。我有一個動態galery填充自舉列，但高度不同，每次，所以我得到這個結果

我知道clearfix解決這個問題，但時間越長列有不同的位置每次。

這是我的代碼：

<div class="container" > 
    <div class="row "> 


    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-obJ2fXQMQmg/VawsKPc7b3I/AAAAAAAANSg/DMBlW4LnRos/s208/image.jpg"></p> 
     <p align="center">Floral silk chiffon with all over beading </p> 
    </div> 


    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-zxR4MthXI00/VawsRkw3kLI/AAAAAAAANTg/A5h-HszkUMs/s208/image.jpg"></p> 
     <p align="center">Large chevron raw silk/cotton with elaborate jewel neck piece</p> 
    </div> 


    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-kNvVqJ2pt24/UazRmaF_UAI/AAAAAAAABwk/d7tJSITBTYM/s208/image.jpg"></p> 
     <p align="center">Black satin lace with elaborate beaded trim and 18" fringe</p> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p> 
     <p align="center">Green Modal fabric with elaborate trim </p> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"   
     <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p> 
     <p align="center">Green Modal fabric with elaborate trim </p> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p> 
     <p align="center">Navy and rose gold silk with elaborate beaded trim</p> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p> 
     <p align="center">Yellow, pink and green crepe with greek key ribbon and paisley patches</p> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p> 
     <p align="center">Red jacquard lace and lined in chiffon with elaborate beaded trim</p> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p> 
     <p align="center">Black Modal fabric with ribbon trim</p> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">   
     <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p> 
     <p align="center">Aztec print charmeuse with circle beaded trim</p> 
    </div> 

    </div>   
    </div> 

我怎樣才能解決這個問題，而無需使用JavaScript或其他圖書館和總是在不同的屏幕尺寸工作。

在此先感謝

Answer 1

如果您不想使用JavaScript，您必須爲包裝提供最小高度。由於它的高度可能會隨着文本而變化，所以會出現對齊問題

解決此問題的常用方法是使用JavaScript使用等高度。這裏是代碼

equalheight = function(container) { 

    var currentTallest = 0, 
     currentRowStart = 0, 
     rowDivs = new Array(), 
     $el, 
     topPosition = 0; 
    $(container).each(function() { 

     $el = $(this); 
     $($el).height('auto') 
     topPostion = $el.position().top; 

     if (currentRowStart != topPostion) { 
      for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { 
       rowDivs[currentDiv].height(currentTallest); 
      } 
      rowDivs.length = 0; // empty the array 
      currentRowStart = topPostion; 
      currentTallest = $el.height(); 
      rowDivs.push($el); 
     } else { 
      rowDivs.push($el); 
      currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 
     } 
     for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { 
      rowDivs[currentDiv].height(currentTallest); 
     } 
    }); 
} 
$(window).resize(function() { //to work in resize 
    equalheight('.col-lg-2.col-md-3.col-sm-4.col-xs-6'); 
}); 

$(document).ready(function() { 
equalheight('.col-lg-2.col-md-3.col-sm-4.col-xs-6'); 
});