Cntlog > スキルアップ・ノウハウ > コーディング > Bootstapのグリッドでcolumn崩れが起きるときの対処法

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

最後に

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

グリッド比較サンプル

関連記事

【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
スマートフォンサイトを作るときによく使うhead内のタグ... スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。 スマホサイトを作り慣れていない人の参考になれば嬉しいです。 目次 viewport ...
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...