Bootstapのグリッドでcolumn崩れが起きるときの対処法

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はサポートもされなくなり使いにくくなりますので早めに乗り換えてみてはいかがでしょう?

最後に

実際に比較できるようにサンプルをつくっています。
よかったら御覧ください。

グリッド比較サンプル

この記事を書いた人

conti

大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。
コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。
プロフィール