Bootstrap3 表单-输出内联表单

为 <form> 元素添加 .form-inline 类可以使其内容左对齐而且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

须要手动设置宽度

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

必定要添加 label 标签

若是你没有为每一个输入控件设置 label 标签，屏幕阅读器将没法正确识别。对于这些内联表单，你能够经过为 label 设置 .sr-only 类将其隐藏。

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

---

—–下面有个“顶”字，你懂得O(∩_∩)O哈哈~
—–乐于分享，共同进步！
—–更多文章请看：http://blog.csdn.net/duruiqi_fx