css - Twitter bootstrap 3 form-horizo​​ntal 和单行多输入列

Question

我需要像这样将多列输入放在一行中:

我通过将多个输入分组到单个 form-group 中来做到这一点，但这样我就不能使用 has-error 类。

<div class="form-group">
     <label class="control-label col-sm-4">Quarter</label>
     <input type="text" class="col-sm-20" />
</div>
<div class="form-group">
     <label class="control-label col-sm-4">Address</label>
     <input type="text" class="col-sm-15" />
     <label class="control-label col-sm-2">Addr. №</label>
     <input type="text" class="col-sm-3" />
</div>
<div class="form-group">
     <label class="control-label col-sm-4">Block name/Number</label>
     <input type="text" class="col-sm-5" />
     <label class="control-label col-sm-2">Entrance</label>
     <input type="text" class="col-sm-3" />
     <label class="control-label col-sm-2">Floor</label>
     <input type="text" class="col-sm-3" />
     <label class="control-label col-sm-2">Apartament</label>
     <input type="text" class="col-sm-3" />
</div>

那么是否可以为每个输入框设置多个form-group？

Answer 1

您需要像这样将输入包装在它们自己的 col-* 类中..

  <form class="form-horizontal">
      <div class="form-group">
          <label class="control-label col-sm-2">Quarter</label>
          <div class="col-md-10">
           <input type="text" class="form-control">
          </div>
      </div>
      <div class="form-group">
          <label class="control-label col-sm-2">Address</label>
          <div class="col-md-8">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Addr. №</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
      </div>
      <div class="form-group">
          <label class="control-label col-sm-2">Block name/Number</label>
          <div class="col-md-4">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Entrance</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Floor</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Apartment</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
      </div>
  </form>

Demo

此外，Bootstrap 中没有col-sm-15 或col-sm-20