Bootstrap中的水平排列的表单

 

水平排列的表单

通过为表单添加 

.form-horizontal

 类，并联合使用 Bootstrap 预置的栅格类，可以将 

label

 标签和控件组水平并排布局。这样做将改变 

.form-group

 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 

.row

 了。

Email

Password

Remember me

复制

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>