an odd fellow

仕事のメモ

Bootstrap3のform-groupとinput-groupについて

ぐぐって出てくる他人のコードの form-group と input-group の使い方が気にかかったのでメモ。

.form-group

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

http://getbootstrap.com/css/#formsより

.form-controleが設定された要素はデフォルトで幅が100%ととなる。幅をカスタマイズしたいときは.form-groupでラップしてくれ。

って感じ。幅100%にしたくないときに使えば良いっぽい。

.input-group

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

http://getbootstrap.com/components/#input-groupsより

form-controleの前後や両端にテキストやボタンを拡張する。input-group-addonを使ってform-controlを拡張してくれ。

input-group-addonが使いたいときにはinput-groupで囲ってやればいい感じ。

inputタグ使うならinput-groupで囲うとかではなくて、拡張したい場合に使うようです。