bootstrap ブログカスタマイズ

bootstrapグリッドシステムでカラムの高さを揃える

bootstrapのグリッドシステム

はじめに

bootstrapのグリッドシステムでcontainer、row、col-xxx-xxxを使用すると簡単にページデザインが出来上がる。 しかし、下の図のようにcol-xxx-xxxの高さが違い要素の回り込みがちぐはぐになる場合がある。

Flexboxを使用する

出典元： A Visual Guide to CSS3 Flexbox Properties

flexboxとは

フレックスボックス（フレキシブルボックス）と言う。要素サイズが不明でも柔軟にレイアウトを実現できるCSS３のレイアウトモジュール。 CSSで複雑なレイアウトを簡単にすることができる。

ブラウザのサポート状況

残念ながら古いブラウザでは対応してない。

出典元： サポート状況-Can i use

グリッドシステムでカラムの高さを合わせる方法

display: flex;を使用しカラムの高さを合わせる

.row-eq-height {
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
  <div class="row row-eq-height>
    <div class="col-xs-4">
      カラム１
    </div>
    <div class="col-xs-4">
      カラム２
    </div>
    <div class="col-xs-4">
      カラム３
    </div>
    <div class="col-xs-4">
      カラム４
    </div>
    <div class="col-xs-4">
      カラム５
    </div>
    <div class="col-xs-4">
      カラム６
    </div>
  </div>
</div>

結果！！

下の図のようにぴったりと揃うようになる

関連記事

スポンサーリンク

スポンサーリンク