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

每一行