Bootstrapで遊ぶ2（グリッドシステム）

おつかれさまです。

先のポストでBootstrapのグリッドシステムについてあれこれ遊んでみました、この機能をもう少し突っ込んで遊んでみます。

Bootstrapのグリッドシステムは「row」の中に「col」というクラス構成にするのが基本でした、この「col」ですが幅を指定することもできそうです。「col-N（Nは数字）」で幅が設定できます、さっそく書いてみます。

<h1  style="background: blue">グリッドシステムのテスト</h1>
<div class="row" style="background: red">
  <div class="col-1" style="background: yellow">test</div>
</div>

ドン！

おお、colの長さが「１」という幅になりました。そして後ろから赤色の要素がはみ出てます、赤色は「row」にあてていた色なので、なるほど重なっていたので色が表示されず、反映されていないように見えたんですかね？

よし、「col」の長さを伸ばしてみましょう、

col-12

おお、幅12でウィンドウいっぱいになりました、

col-13

ナヌ、バグった、、、なぜこんな表示になるのかはよく分かりませんが、とりあえずウィンドウ幅いっぱいが「col-12」ということが分かりました。

ひとまずここまで仕様が分かればいろいろアレンジが試せます。

まず、「col-N」を分解して12以下になった場合、「col-2（黄色）」と「col-3（緑色）」を試してみます。

<h1  style="background: blue">グリッドシステムのテスト</h1>
<div class="row" style="background: red">
  <div class="col-2" style="background: yellow">test1</div>
  <div class="col-3" style="background: green">test2</div>
</div>

ドン！

ほうほう、12に足りない分は余白になるのね

次、「col-N」の合計が12より大きくなった場合、「col-5（黄色）」と「col-3（緑色）」と「col-7（灰色）」を試してみます、またバグるのか…

<h1  style="background: blue">グリッドシステムのテスト</h1>
<div class="row" style="background: red">
  <div class="col-5" style="background: yellow">test1</div>
  <div class="col-3" style="background: green">test2</div>
  <div class="col-7" style="background: grey">test3</div>
</div>

ドン！

なーるーー、はみ出た分は下の段に移動するのね、ほうほう、

最後に、「col-N」と「col（N指定なし）」が混在してたらどうでしょう、「col-5（黄色）」と「col（緑色）」と「col（灰色）」と「col-1（白色）」を試してみます、

<h1  style="background: blue">グリッドシステムのテスト</h1>
<div class="row" style="background: red">
  <div class="col-5" style="background: yellow">test1</div>
  <div class="col" style="background: green">test2</div>
  <div class="col" style="background: grey">test3</div>
  <div class="col-1" style="background: white">test4</div>
</div>

ドン！

あーーーなる＊＊＊端が「col-5」と「col-1」で固定され、その間の幅（N=6）を「col」で2等分される感じデスネ！！

グリッドシステムがだいたい分かってきました、ただこのシステム、使いこなすにはいろいろ作ってみながらの鍛錬が必要っぽい、でも仕組みは理解できたのでとりあえずはおｋ！