Bootstrapのform-groupの使い方

###質問の詳細
Bootstrapのクラス『form-group』は、フォーム内の部品に対して1つにまとめて使用するのはアリですか。
さまざまな解説をみると、以下のように、フォーム内の部品に対していちいち『form-group』で囲った書き方をしています。

HTML
1<form>
2  <div class="form-group">
3    <label>項目A</label>
4    <input type="text" class="form-control">
5  </div>
6  <div class="form-group">
7    <label>項目B</label>
8    <input type="text" class="form-control">
9  </div>
10</form>

以下のように、まとめた書き方ではだめなのでしょうか。
自分で調べたところ、いちいち『form-group』で囲ったとき（上のソースコード）と、まとめて囲った（下のソースコード）の違いは、程よい間隔（『form-group』同士の間隔）が得られるかそうではないかくらいしかわからなかったのですが……。

HTML
1<form>
2  <div class="form-group">
3    <label>項目A</label>
4    <input type="text" class="form-control">
5    <label>項目B</label>
6    <input type="text" class="form-control">
7  </div>
8</form>

Bootstrapを使用しているなかで、素朴に気になったので質問いたしました。
まとめた書き方のデメリットや、自分はform-groupを使うときはこんな書き方をしてます、など、form-groupについてご回答いただけますと幸いです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

私の場合、どうしてもまとめなければならないケースを除いてコントロール毎に囲っています。
理由としてはレスポンシブ対応をする上では、コントロール毎に囲うのがこのCSSフレームワークのルールだからです。
言い方は悪いですがルールから外れていることにもなるのでレスポンシブにならなかった場合の動作は保証されません。

投稿2017/08/18 02:15