Bootstrap 3で横型フォームの中にインラインフォームをネストさせる

質問

Bootstrap3でこのようなフォームを作りたいのですが、どうすればよいでしょうか？

私のサイト（上記リンク先ではない）はBootstrap 2.3.2からアップデートしたところ、フォーマットが正しくなくなりました。

このタイプのフォームについて、以下のようなドキュメントを見つけることができません。 getbootstrap.com .

どなたか教えていただけませんか？ユーザー名」のみでOKです。

ありがとうございます。

PS があります。 類似の質問 がありますが、これはBootstrap 2.3.2を使用しています。

どのように解決するのですか？

私は デモ をご覧ください。

Bootstrap 3でネストされた構造がどのようになるかを示します。

<div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

全体の form-inline の中に入れ子になっていることに注意してください。 col-xs-10 div の中に入れ子になっています。言い換えれば、全体の form-inline はメインの横型フォームの誕生日ラベルの "コントロール"である。

ノート インラインフォームを横型フォームの中に入れ込むと、左右のマージンの問題が発生することがあります。これを修正するには、cssにこれを追加してください。

.form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}