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

https://namagomi-days.com/grid-system-height/

 

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

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

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

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

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

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

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

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

 

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

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

 

 

<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>