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

Question

我是Bootstrap的新手。

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

理想情况下，我希望在中等分辨率屏幕上使用2x2网格，在大屏幕上使用4x1网格。

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

使用浏览器窗口~1200px查看http://www.prynk.com/developer/（或只调整大小，直到看到两列）。此时，网格框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解释情况，希望它可以帮助您解决问题。