保持按钮和表单，并在Bootstrap 3中的同一行中选择下拉列表

Question

我正在努力保持按钮，以及带有<select>标签（包括其标签）的表单都在Bootstrap 3的同一行。每当呈现表单时，它似乎在添加换行符之前表格。以下是我到目前为止所提出的内容（http://www.bootply.com/98022）：

<div class="container">
    <div class="row">
      <button class="btn btn-default">Test 1</button>
      <button class="btn btn-default">Test 2</button>
      <form role="form" class="form-inline">      
      <div class="form-group">
        <label for="selectUser">Select:</label>
        <select id="selectUser" class="form-control selectWidth">
          <option class="">One</option>
          <option class="">Two</option>
          <option class="">Three</option>
        </select>
      </div>
      <div class="btn-group">
        <button class="btn btn-default">Test 3</button>
      </div>
      </form>
    </div> <!-- End Row -->
</div> <!-- End Container -->

我认为class="form-inline"会将它保持在同一行。不幸的是，这就是它的呈现方式：

这是我在图像编辑程序中创建的模型，我希望它看起来像：

我故意选择使用<select>元素而不是Bootstrap下拉列表，因为移动设备上的界面是最佳的（列表将非常大，并且尝试在小屏幕上选择正确的选项更容易表单<select>元素）。

我发现了类似的问题，但大多数问题都没有解决表单中的<select>标记，或者是旧版本的Bootstrap（2.x）。任何帮助将不胜感激。

谢谢！

Answer 1

您的前两个按钮不在form标记内。

似乎form-inline没有为标签定义样式，所以添加左浮动一些填充并将选择的宽度设置为自动。

<div class="container">
    <div class="row">
    <form role="form" class="form-inline">  
      <button class="btn btn-default">Test 1</button>
      <button class="btn btn-default">Test 2</button>
      <div class="form-group">
        <label for="selectUser" style="float:left;padding: 6px 12px 2px 12px;">Select:</label>
        <select id="selectUser" style="width:auto;" class="form-control selectWidth">
          <option class="">One</option>
          <option class="">Two</option>
          <option class="">Three</option>
        </select>
      </div>
      <div class="btn-group">
        <button class="btn btn-default">Test 3</button>
      </div>
      </form>
    </div> <!-- End Row -->
</div> <!-- End Container -->