Bootstrap3 横向表单/水平表单

横向表单

通过为表单添加.form-horizontal类，并联合使用 Bootstrap的栅格类，便可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。如：

1. <form class="form-horizontal">
2.   <div class="form-group">
3.     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
4.     <div class="col-sm-10">
5.       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
6.     </div>
7.   </div>
8.   <div class="form-group">
9.     <label for="password3" class="col-sm-2 control-label">Password</label>
10.     <div class="col-sm-10">
11.       <input type="password" class="form-control" id="password3">
12.     </div>
13.   </div>
14.   <div class="form-group">
15.     <div class="col-sm-offset-2 col-sm-10">
16.       <div class="checkbox">
17.         <label>
18.           <input type="checkbox"> Remember me
19.         </label>
20.       </div>
21.     </div>
22.   </div>
23.   <div class="form-group">
24.     <div class="col-sm-offset-2 col-sm-10">
25.       <button type="submit" class="btn btn-default">Sign in</button>
26.     </div>
27.   </div>
28. </form>

效果如图 2‑51所示：

图2-51 横向表单

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。