保持按钮和表单,并在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没有为标签定义样式,因此添加左浮动一些填充并将选择的宽度设置为auto.

<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 -->