T.Takahashi bootstrapグリッドシステムでカラムの高さを揃える 2017-06-23T05:22:14Z
0;ゼロからはじめる!

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

bootstrapのグリッドシステム

はじめに

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

Flexboxを使用する
出典元: A Visual Guide to CSS3 Flexbox Properties
flexboxとは

フレックスボックス(フレキシブルボックス)と言う。要素サイズが不明でも柔軟にレイアウトを実現できるCSS3のレイアウトモジュール。 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">
      カラム1
    </div>
    <div class="col-xs-4">
      カラム2
    </div>
    <div class="col-xs-4">
      カラム3
    </div>
    <div class="col-xs-4">
      カラム4
    </div>
    <div class="col-xs-4">
      カラム5
    </div>
    <div class="col-xs-4">
      カラム6
    </div>
  </div>
</div>
結果!!

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

スポンサーリンク

0 件のコメント :

コメントを投稿