[Bootstrap] inputとボタンが横に並んだフォームを作る

Twitter Bootstrap 3でインプット欄とボタンが横に並んだフォームを作る方法のメモ。

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">検索</button>
  </span>
</div>

アイコンを使いたい場合はこう。

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">
      <i class='glyphicon glyphicon-search'></i>
    </button>
  </span>
</div>

buttonタグに直接glyphiconクラスを設定するとインプット欄とボタンがわずかにずれるのでbuttonタグの中にiタグを設定し、そこにglyphiconクラスを与える。

bootstrap公式サイトのドキュメントではbuttonタグではなくspanタグを使った例が示されていて、spanを直接buttonに書き換えてうまくいかず時間を無駄にしたので書き残しておきます。

以下はデモです。