[Bootstrap]発想の幅が広がりそう。グリッドの中を更に12分割して出来ること。

2017年2月13日

ダディーです。

前回のブログにて、「Bootstrap」は画面を12個のグリッドに分割して、3+9、6+6、4+4+4と言った感じで割り当てることで
簡単に画面構成が作れるというお話をしました。

さて、ここにBootstrapで実際に用意したコンテンツがあります。

ここでふと、こんな感じのページが作れたらなぁと考えました。

左側にはメニューとか広告とかその類を置くスペースに。右側にはコンテンツをたくさん並べたい。
そこで「右側のグリッド内で更に12分割できれば、コンテンツを並べていけるのでは！？」と思ったわけですね。

この課題は「グリッドの入れ子構造」で簡単に解決できちゃうんです。

グリッドの中を更に分割する方法

グリッドの中を更に分割する前に、以前のブログで”この範囲を1行とみなす”という
class = “row”がありましたね。

実は、行を指定するrowを更に分割したいグリッドの中に入れ込むだけで、
グリッド内でさらに分割ができるようになるのです。

こうすることで、以下のようなページが出来上がります。

画面幅が小さいと小さいコンテンツ達だけが縦一列に並びます。外側のコンテンツには影響はありません。

中身はこんな感じになっています。ブログサービスや情報サイトを作る時にこういった構造はよく使うのではないでしょうか。