Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。
今回はその対処方を紹介します。
対処方法
Flexboxを使う
gridの.rowにFlexboxを当てれば解決します。
CSS
.flex{
display: flex;
flex-wrap: wrap;
}
HTML
<div class="row flex">
<div class="col-md-6">
…
</div>
<div class="col-md-6">
…
</div>
<div class="col-md-6">
…
</div>
</div>
Flexboxを使えば子要素の高さを均等にする性質がありますので、floatのときのようなcolumn崩れを起こす事はありません。
Bootstrapのgridに併用して使えるのでリスク無く使えてかつ簡単です。
Bootstrap4を使う
現在Bootstrap4が開発中です。アスファ版を名乗ってますがもう数年前から開発を続けているので結構安定して使えます。
いつまでも古いブラウザに対応したBootstrap3を使うのではなく、最新のものに切り替える事で無用な悩みは減るのでオススメです。
学習コストが…と思われるかもしれませんが、どのみちいつかbootstrap3はサポートもされなくなり使いにくくなりますので早めに乗り換えてみてはいかがでしょう？
最後に
実際に比較できるようにサンプルをつくっています。
よかったら御覧ください。