【bootstrap3】グリッドシステムのボックスの高さをCSSだけで揃える。

Web

bootstrap、便利ですよね。僕はずっとお世話になっています。

bootstrapの魅力はなんといってもクラスを指定するだけでコンテンツを横並びにすることができるグリッドシステムです。

でも絶対に一度はつまづく問題が「グリッドシステムで横並びにしたボックスコンテンツの高さが合わない問題」です。

ここではくわしく説明しませんが、floatプロパティを使って横並びさせた時の宿命です。

ボックスに枠線や背景色をつけなければそこまで気になりませんが、つけたい時絶対ありますよね。

このグリッドシステムで横並びさせたボックスの高さを揃える解決法をまとめます。

グリッドシステムで高さが合わない例

以下はグリッドシステムで高さが揃わないコード例です。

子要素であるinner-boxに、borderプロパティを指定します。

<div class="row">
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
</div>
.inner-box {
    border: 1px solid #ccc;
}


中のコンテンツの量によって各ボックスの高さが決まるので、このように異なるテキスト量を入れると高さがバラバラになってしまいます。

このボックスごとの高さを揃えます。

flexboxを使用して高さを揃える

floatさせているボックスの高さを常に揃えるにはflexboxというcssプロパティを使います。

flexboxは、CSS3で新しく追加された簡単に横並びにすることができる大注目のレイアウトテクニックです。

数年前は各ブラウザが対応していなくて気軽に使うわけにはいかなかったんですが、最近ではほとんどのブラウザが対応しています。昔のブラウザに対応しなければならないようなWebサイト制作でない限り、問題ないでしょう。

以下のようなクラスをスタイルシートに記述します。

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

ちなみにクラス名「row-eq-height」は、高さ(height)を等しく(equal)するという意味です。

このクラスを、col-*を指定している1つ上の親要素に指定します。rowが指定してあるdivタグですね。

<div class="row row-eq-height">
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
</div>

これでボックスの高さは揃いましたが、borderを指定しているのは子要素のinner-boxなので、height:100%を指定してあげます。

.inner-box {
    border: 1px solid #ccc;
    height: 100%;
}

すると、borderがボックスいっぱいに引き伸ばされますね。

まとめ

jqueryを使って高さを揃える方法もありますが、CSSのみで解決できるならその方がいいかと。

ちなみに最新バージョンのbootstrap4では、グリッドシステムがfloatではなくflexboxでつくられているので、4を使えばこのような心配はないのかも?

僕はbootstrap3がシンプルなので好きで使っていますが、3を使う以上「ボックスの高さが揃わない問題」と付き合わなければなりません。

でも、この解決法を使えばそんな悩みともおさらばです。

タイトルとURLをコピーしました