フォームをグリッドでレイアウトする - Bootstrapのチュートリアル

このレッスンでは form 要素を行と カラムのグリッドでレイアウトしてみます。 今開いているフォームなんですけど 名前と住所、都道府県と 郵便番号を入れる ということなんですけど すべて１行 フルに使っていますね。 例えばこんな長い名前の人いませんし、 都道府県と郵便番号も 並べてしまっていいでしょう。 そうできるように 一応まず div 要素で分けてあるんですね。 これが「姓」「名」ですね。 それから「住所」のところは ここは単独なんですが 都道府県と郵便番号は div 要素でまとめてあります。 ここで row と column を使った グリッドレイアウトができるわけです。 ここでまずは「姓」「名」のほうですね。 この「姓」「名」の div 要素に対して class の行は row ですね。 row を定めます。 それから form-group で 「姓」と「名」がそれぞれ分けてあります。 今くっついちゃってますけどね。 これをカラムにすれば いいということですので form-group について それぞれ 半分ずつでいいですかね。 ですから 12 ということですので、12 を ６ずつに分けるという形になりますね。 それからこちらも col−6 半分ずつに分かれました。 ただちょっとここ、 間隔が空きすぎですね。 マージンとかで詰めてもいいんですけど form 用に form の row という クラスがあります。 名前はそのまま form-row と。 こちらの方がちょっと間隔が詰まってて 見やすいと思います。 住所は飛ばして今度は 都道府県と それから郵便番号、 ここもまず全体の div 要素を class form-row ということで設定をし、 その上で form-group、 都道府県の方ですね。 ここに col-6 としましょうか。 ６は大きいですかね。 ４、そして 郵便番号の方です。 こちらも col-4 と。 そしたらやっぱり ６でいいですかね、６ぐらい。 ６と４で単位２の分だけ ちょっと余白が空いてますけど 都道府県と郵便番号だったら これぐらいあれば十分でしょう。 ではこれでファイルを保存して ブラウザーで見てみます。 この様な感じに レイアウトされました。 ウィンドウが幅フルサイズですと ちょっと広い感じがしますけど…