グリッドシステムを使ったより現実的なフォーム

USのフォームなんか見てると、項目とフォームが改行されているケースをよく見かけますが、日本だと左右に配置されているケースが多いと思います。

フォームの項で書いたサンプルは改行されているものとインラインでしたが、ここではよく見かけるお問合せフォームをグリッドシステムで書いてみます。

項目をcol-sm-2、フォームパーツをcol-sm-10としています。

お名前のようにテキストフォームのサイズを変更したい場合はform-inlineをclassに加え、sizeで調整します。

好みですが、デフォルトだとフォームパーツが大きく感じるので、input-smで小さくしています。

あと、col-sm~には余白が無いのでフォーム同士が上下でくっついてしまいます。 サンプルではstyle~で指定していますが、col-sm-10に対して余白が出来るようCSSを上書きすると良いかもです。