Bootstrap portofolio - 空網格空間

Question

我在引導網格中遇到網格問題。我有連續的空白空間。 這是顯示在桌面上，在移動設備上就像。

，我正在使用的代碼是

<div class="row"> 
     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book1.png" alt=""> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book2.png" alt=""> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book3.png" alt=""> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book4.png" alt=""> 
      </a> 
     </div> 

     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book4.png" alt=""> 
      </a> 
     </div> 
     </div> 

我真的不知道我怎麼能解決這個問題，所以我希望有人可以給我一些建議。

Answer 1

這是由於你的div的高度不同。你有這樣幾個可能的修復：

1. 手動設置所有div等高。

2. 使用像https://github.com/liabru/jquery-match-height這樣的東西來爲你設置div的高度。您可以使用不同的設置，例如每行一行。

3. 使用flexbox網格。不幸的是Flexbox的不夠普及尚

4. 使用Flexbox將混合物用JavaScript這樣http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Answer 2

必須設置爲min-height列，因爲列具有不同的高度。

.portfolio-item { 
min-height: 200px; 
} 

將200px更改爲適合各自位置的列的最小值。

Answer 3

確保所有圖書的圖片大小相同......或者只需將最小高度設置爲「投資組合項目」類。

Answer 4

每一行