如何使用Bootstrap内联某些表单字段

Question

我有一个包含几个字段的表单需要内联。 Bootstrap不允许我这样做，它在整行上呈现表单字段。此外，我希望标签旁边的字段。

将字段子集包装在设置为form-inline的表单标记中是否可行，以及如何使表单字段不会自行断开。这是我想要实现的目标：

这是我尝试过的：

<div class="form-group">
    Zipcode <input type="text" data-bind="value: Zipcode" class="form-control"> 
    Response Time <input type="text" data-bind="value: ResponseNumber" class="form-control"> <select data-bind="options: ResponseUnits" />
</div>'

另外，我还没有在<form>中包装表单，因为我使用<form>来包装文件dropzone。我正在使用knockout和ajax，所以我不需要使用表单（除非它们是引导程序所必需的）。

Answer 1

从您的示例看起来更像是在水平样式表单之后。使用表格组。

https://jsfiddle.net/whxf78zw/1/

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Zipcode:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="zipcode" placeholder="Enter zip">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="responseTime">Response Time:</label>
    <div class="col-sm-3"> 
      <input type="number" class="form-control" id="responseTime" placeholder="Enter response time">
    </div>
   <div class="col-sm-3"> 
        <select class="form-control">
            <option>Hours</option>
            <option>Days</option>
            <option>Weeks</option>
            <option>Months</option>
            <option>Years</option>
          </select>

      </div>
    </div>

</form>