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

后端未结

关注

 2  859

长发绾君心

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

$\"What$

I did this by grouping

相关标签:

2条回答

别那么骄傲

2021-01-31 04:22

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.

0 讨论(0)

生来不讨喜

2021-01-31 04:49

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

0 讨论(0)