Bootstrap列未正確對齊

Question

我的列中有一個無法識別的怪異錯誤，我不知道這是我的錯還是自舉。

基本上，我只有一個<div class="row"> ，其中可能包含許多<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> 。 我只是想實現的是，所有col *項目都適合屏幕（寬度為100％），並且在調整大小時彼此對齊。 除此JSFiddle之外，這通常可以很好地工作 。

問題在於，在某些行上，一個div會完全發瘋，並且無法在行中正確對齊（嘗試在小提琴中緩慢調整結果的大小，您會明白我的意思）。

我正在使用bootstrap 3.3.6和Chrome到最新版本（在FF上嘗試，結果很奇怪...）。 “ clearfix”什么都不做。 我嘗試了packery.js，結果相同。

這個答案（ Bootstrap列無法正確對齊 ）對我有幫助，但是我事先不知道會有多少列（因為這取決於屏幕尺寸）...

當然，我嘗試過為每個.gallery-item設置最小高度...

有任何想法嗎 ？

提前致謝，

更新 ，這是我的代碼中出現的缺少的CSS：

div.gallery-item {
    margin-bottom: 15px;
}

div.gallery-item, div.gallery-item * {
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
}

.gallery-item {
    cursor: pointer;
}

.gallery-item.active {
    background-color: rgba(128,192,255,0.5);
}

第二次更新 ，根據建議，我通過為每個圖庫項目添加固定高度來使其正常工作，如下所示：

.gallery-item {
  height: 300px;
}

謝謝大家 ：）

Answer 1

問題是因為並非行內的所有列都具有相等的高度。 請看以下內容以確保相等的柱高。

連結這里

用這種方法更新了您的Fiddle，看看更新的Fiddle

添加了CSS

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

將CSS類添加到gallery-item

row-eq-height gallery-item