カラムを入れ子にする - Bootstrapのチュートリアル

このレッスンではカラムの中に 入れ子でカラムを配置してみます。 今開いている このページなんですけど グリッドの配置というのは まず行が２つあります。 row が div 要素で １個２個ですね。 そして上の行、 row なんですけど そこにはカラムが２つあって そのカラムの幅なんですけど カラム１が４、カラム２が８ということで ４：８、 １：２ですね。 という配置になっています。 そして今度は２行目なんですけど ２行目はすべて同じ幅ということで ４・４・４ということで col-4 が設定されています。 これは行が２個あるんですけど カラム２の中に ２行目ですね、これを 入れ子にしてしまうということができます。 そうすると全体としては カラム１とカラム２があるだけになって そのカラム２の中に このカラム３・４・５入るという 入れ子の形になります。 入れ子にするには、 ではこのカラム２がありますね。 では「カラム２」という テキストは残しておいて 改行しましょう。 この div 要素の中に row と col ですね。 行とカラムを入れ子にしてしまえばいい。 単純に移動すればいいんですね。 ということでドラッグをして 移動します。 インデントを整えましょう。 こうすると div 要素のカラムの中に div 要素の row が入り その row の中に入れ子になったカラムが ３つ入ったということで こちらのような表示になっています。 保存をしてブラウザーで 確かめてみましょう。 ブラウザーでウィンドウを フルサイズで表示しました。 もちろんレスポンシブになっていますので 幅を狭めると 両端の余白が変わってきますね。 ただレイアウトそのものは カラム１があってカラム２があって カラム２の中にカラム３・４・５が 並んで入れ子になっているということは 変わりません。 フルサイズの場合にカラム１とカラム２、 これは同じ幅でいいかもしれません。 ブレークポイントの設定をしましょう。 カラム１とカラム２、 これの幅の設定ですね。 まず４：８、これはこのまま 残しておいていいので 幅が広い場合ということで カラムの large ですね。 この場合に カラム１は６を与える。 カラム２も同様ですね。 カラムが lg、large の時６、 ６：６、同じ大きさ…