ブートストラップの列が正しく整列していません

Question

私の識別できない列に奇妙なバグがあります。それが自分の過失かブートストラップなのか分かりません。

基本的には、<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">が多数含まれている可能性がある<div class="row">が1つあります。私が単純に達成したいのは、すべてのcol *アイテムが画面にフィットし（100％幅）、サイズ変更時に互いに整列することです。これは、JSFiddleを除いて、正常に動作します。

問題は、一部の行では、1つのdivが完全に狂ってしまい、行内に正しく配置されないということです（フィドルの結果をゆっくりとサイズ変更しようとすると、私の意図がわかります）。

私はブートストラップ3.3.6とChromeを最新のバージョンに使用しています（FF、同じ奇妙な結果が出ました...）。 "clearfix"は何もしません。私はpackery.jsと同じ結果を試しました。

この回答（つまり、画面サイズに依存しますので）（Bootstrap columns not aligning correctly）私を助けてくれているだろうが、私は私が持っているだろうどのように多くの列を事前に知っていない...もちろん

、私が持っています最小の高さをそれぞれに設定しようとしました.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; 
} 

ll :)

Answer 1

問題は、行内のすべての列が等しい高さではないためです。等しい柱の高さを確保するために、以下を見てください。このアプローチでフィドルあなたを更新しました

Link here

、gallery-item

row-eq-height gallery-item