.form内の一部inputだけinlineで表示する

Bootstrapだと .form-inline 以外の .form- は input がブロック要素になってしまう。
従って、 .form-horizontal 内の一部 input だけinlineにしたい場合、少し工夫が必要になる。

必要になるシーン

生年月日や姓名で別のフォームに入力させるときなど。

実装

解決方法として、 .form-group 内でインラインフォームをまとめる要素に .form-inline を指定する。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">ラベル</label>
    <div class="col-sm-9 form-inline">
      <label>姓</label><input type="text" class="form-control" />&nbsp;
      <label>名</label><input type="text" class="form-control" />
    </div>
  </div>
</form>

これでいけるはずです。