Twitter bootstrap 并排引导选择和文本框

我正在尝试并排显示

下拉列表

和

输入

，如下图所示

我尝试过内联表单和输入组，但我看到的所有示例都显示了

静态文本

与span和

输入

控件并排对齐

到目前为止，以下是我尝试过的

<div class="form-inline">
  <div class="form-group">
    <select class="form-control" id="phonetype">
                <option value="">Select Phone Type</option>
                <option value="Passport">Mobile Phone</option>
                <option value="SSN">Work Phone</option>
              </select>
    <input class="form-control" id="phone" name="phone" type="text" placeholder="">
  </div>
</div>

选择电话类型
手机
工作电话

选择电话类型
手机
工作电话

试试这样的方法：

  <div class="container">
  <div class="row">
    <div class="form-inline">
      <div class="form-group navbar navbar">
        <select class="form-control nav navbar-nav navbar-static-top" id="phonetype">
          <option value="">Select Phone Type</option>
          <option value="Passport">Mobile Phone</option>
          <option value="SSN">Work Phone</option>
        </select>
        <input class="form-control nav navbar-nav navbar-static-top" id="phone" name="phone" type="text" placeholder="">
      </div>
    </div>
  </div>
</div>

选择电话类型
手机
工作电话

它产生了以下结果：

---

谢谢你的回答，但是它与我发布的图片不匹配。我尝试过调整，但没有效果。看到有问题的图像了吗