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

最後に

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

グリッド比較サンプル

関連記事

コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...
RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...