Bootstrapでform要素内にselect要素を置くときの実装メモ

Bootstrap*1で"form要素"と"select要素"の説明がそれぞれあって、それを合わせて使おうとしたらレイアウトが崩れてしまいました。
いろいろ試してみて、以下のような感じで落ち着きました。

HTML

<html>
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<h2>Bootstrap Horizontal Form</h2>
<form class="form-horizontal" action="/hoge/foo" method="post">
  <div class="form-group">
    <label for="name" class="control-label col-xs-2">Name</label>
    <div class="col-xs-5">
      <input type="text" class="form-control" id="name" name="name" placeholder="your name">
    </div>
  </div>
  <div class="form-group">
    <label for="number" class="control-label col-xs-2">Number</label>
    <div class="col-xs-3">
      <select class="form-control" id="number" name="number">
        <option value="1">1</option>
        <option value="2" selected="selected">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
</body>
</html>