引導柵格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解釋的情況，希望它可以幫助你。