ブートストラップ列遷移を使用するときの空白

Question

モデルを使用してインデックスページにデータを読み込むレールアプリケーションがあります。インデックスページは、ブートストラップの列と行を使用して表示されます。私は、ホバー上でボックスをより大きくするためにトランジションを追加しました。最初の行が上にぶら下がっているときの見た目が好きですが、中間または最後のボックスが大きくなると、左に空白が残ります。私は広範囲にグーグルを行ったが、私は間違ったものを探しているか、何かを見逃している。

私の質問は：背の高いボックスの左側の空白が小さなボックスで満たされ、左右に同じように見えるようにするにはどうしたらいいですか？ 必要に応じてjavascript/jQueryソリューションを公開しています。

ありがとうございます！ボックス

Answer 1

の左側に

This is what I want

This is what I am getting空きスペースにこれを試してみてください：

<div class="masonry"> 
    <div class="box" id="a">A</div> 
    [...] 
</div> 

とCSSを：

.box { 
    height: 25px; 
    border: 1px solid black; 
    border-radius: 15px; 
    transition:height 0.5s; /* Animation time */ 
    -webkit-transition:height 0.5s; /* For Safari */ 
    &:hover { 
    height: 50px; 
    } 

    -webkit-column-break-inside: avoid; 
      page-break-inside: avoid; 
       break-inside: avoid; 
    position: static; 
} 
.masonry { 
    column-count: 4; 
} 

現在行ごとに4列に固定され、その、あなたはそれを変更することができますcolumn-countを動的に@media (min-width: ...px) {}を使用して、あなたのニーズに合わせてください！