Bootstrapは大変便利なものですが、ちょっとしたCSSを追加するともっと便利に利用できるようになります。
今回はBootstrapのグリッドシステムをセンタリングします。
1.基本的なBootstrapのグリッドシステムの拡張
追加するCSSコードは下記のコードです。（BootstrapのCSSは既に読み込まれている前提です）
|
1 2 3 4 5 6 7 8 9 10 |
.row-center{ text-align:center; letter-spacing:-0.4em; } .row-center > [class*='col-'] { display:inline-block; letter-spacing:0; vertical-align:top; float:none !important; } |
ポイントとしては、カラムに当たる部分の.col-xx-xxに対して、display:inline-block;を設定しfloatを解除します。
親に当たる.rowに対して、text-align:center;を設定し、デフォルトの状態では、子要素同士が少し空いてしまい、段落ちしますので、letter-spacing:-0.4em;を適用し余白を詰めます。
HTMLの記述は、下記のような形になります。
|
1 2 3 4 5 6 7 |
<div class="row row-center"> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> </div> |
実際に上記コードを適用した表示例です。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
2.さらなる拡張で天地中央揃え、下揃えも可能！
カラムにdisplay:inline-block;を適用すると、他のメリットも教授できます。
- 行ごとに.rowで囲まなくても良くなる。
- vertical-alignによる調整が可能になり、下揃えのカラムや天地中央揃えのカラムなどが実現できる
下記のCSSも追加します。
|
1 2 3 4 5 6 |
.row-center.va-middle > [class*='col-'] { vertical-align:middle; } .row-center.va-bottom > [class*='col-'] { vertical-align:bottom; } |
HTMLの記述は、下記のような形になります。
|
1 2 3 4 5 6 7 |
<div class="row row-center va-middle"> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> <div class="col-sm-4"><p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p></div> </div> |
実際に上記コードを適用した天地中央揃えグリッドの表示例です。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
実際に上記コードを適用した下揃えグリッドの表示例です。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
このようにちょっとしたCSSを追加するとBootstrapのグリッドシステムがより柔軟に利用できるようになります。
