html - 如何使用 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，所以我不需要使用表单(除非 Bootstrap 需要它们)。

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>