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...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...