Twitter bootstrap 3 form-horizontal and multiple input columns on single line

StackOverflow https://stackoverflow.com/questions/23581571

  •  19-07-2023
  •  | 
  •  

题

I need to place multiple columns of inputs in single line like this:

What i need

I did this by grouping multiple inputs in single form-group, but this way I can't use has-error class.

<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>

So is it possible to have multiple form-group's for each input box?

有帮助吗？

解决方案 2

To align easily things in bootstrap 3, You should use the Grid System.
Here is a fiddle close to your needs : 

<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>

The alignment depends on the width of the screen so be sure to tune it properly to your needs. Then you can style the inputs themselves.

其他提示

You need to wrap the inputs in their own col-* classes like this..

  <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

Also, there is no col-sm-15 or col-sm-20 in Bootstrap

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top