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