Question

我需要在单行中放置多列输入，如下所示：

What i need

我是通过在单个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

Answer 2

要轻松对齐bootstrap 3中的内容，您应该使用Grid System 这是一个符合您需求的fiddle：

<body>
<form class="form-horizontal">
    <div class="row">
       <div class="form-group">
        <label class="col-sm-2">Quarter</label>
        <div class="col-sm-10"><input type="text" class="form-control" /></div>
        </div>
   </div>
    <div class="row">
        <div class="form-group">
        <label class="col-sm-2">Address</label>
        <div class="col-sm-5"><input type="text" class="form-control" /></div>
        </div>
        <div class="form-group">
        <label class="col-sm-2">Addr. №</label>
        <div class="col-sm-3"><input type="text" class="form-control" /></div>
        </div>
    </div>
    <div class="row">
         <div class="form-group">
        <label class="col-sm-2">Block name/Number</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
        </div>
        <div class="form-group">
        <label class="col-sm-1">Entrance</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
         </div>
         <div class="form-group">
        <label class="col-sm-1">Floor</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
         </div>
         <div class="form-group">
        <label class="col-sm-2">Apartament</label>
        <div class="col-sm-3"><input type="text" class="form-control" /></div>
        </div>
    </div>
</form>
</body>

对齐取决于屏幕的宽度，因此请务必根据需要进行调整。然后你可以自己设置输入样式。

Twitter引导程序3在单行上形成水平和多个输入列

2 个答案: