自举网格 DIV 之间出现垂直间隙的原因

Question

我是 Bootstrap 的新手。

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

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

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

查看http://www.prynk.com/developer/，浏览器窗口约为 1200 像素（或调整大小直到看到两列）。此时，网格框 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 解释了这种情况，希望对你有所帮助。