引导栅格DIV之间的垂直间隙的原因

Question

我是Bootstrap的新手。

我的网站上有一个4格网格（http://www.prynk.com/developer/），class =“col-md-6 col-lg-3”。

理想情况下，我想要在中等分辨率屏幕上的2x2网格和大的4x1网格。

我遇到的问题是列在Y方向上没有正确对齐。

看看http://www.prynk.com/developer/与浏览器窗口〜1200px（或只是调整，直到你看到两列）。此时，网格盒3和4之间存在较大间隙;有人可以解释为什么会发生这种情况吗？

我的代码：

<div class="col-md-6 col-lg-3"> 
 
    <div class="thumbnail"> 
 
     <img /> 
 
     <div class="caption center-text"> 
 
      <h3 class="ptsans">Coming soon!</h3> 
 
      <p>blah blah.</p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

的问题是，你的列都具有不同的高度，因为它们被拉伸，以适应他们的孩子的内容。尝试添加下列到你的CSS文件：

@media (min-width: 1200px) { 
    .col-lg-3 { 
    height: 650px; 
    } 
} 

@media (min-width: 992px) { 
    .col-md-6 { 
    height: 500px; 
    } 
} 

这只是定义了高度的基于媒体的查询.col-md和.col-lg代表列。只要定义了实际高度值并不重要。

Answer 2

这是因为第一个div标签比div第二个标签长很多。在这里你可以看到第一个是如何防止采取下面的空间，第三个：

我曾经使用服务器端语言插入一个clearfix元素从而对准我的箱子来解决这个问题，但是我发现只有使用CSS的技术有很多。你应该能够解决这个问题，display: flex和flex-wrap - this tutorials解释的情况，希望它可以帮助你。