Bootstrap 内联表单

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

<form class="form-inline" role="form"> 
  <div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail2">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> 
  </div> 
  <div class="form-group"> 
    <div class="input-group"> 
      <div class="input-group-addon">@</div> 
      <input class="form-control" type="email" placeholder="Enter email"> 
    </div> 
  </div> 
  <div class="form-group"> 
    <label class="sr-only" for="exampleInputPassword2">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
  </div> 
  <div class="checkbox"> 
    <label> 
      <input type="checkbox"> Remember me 
    </label> 
  </div> 
  <button type="submit" class="btn btn-default">Sign in</button> 
</form>