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>包装文件拖放区。我正在使用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>