Bootstrap3 行内表单

行内表单

为<form>元素添加.form-inline类，就可以创建一个表现为inline-block的行内表单。行内表单采用紧凑布局，它的所有控件都在一行内显示，标签和输入框使用左对齐方式。如：

1. <form class="form-inline">
2.   <div class="form-group">
3.     <label for="exampleInputName2">Name</label>
4.     <input type="text" class="form-control"id="exampleInputName2">
5.   </div>
6.   <div class="form-group">
7.     <label for="exampleInputEmail2">Email</label>
8.     <input type="email" class="form-control" id="exampleInputEmail2">
9.   </div>
10.   <button type="submit" class="btn btn-default">Send invitation</button>
11. </form>

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为width: 100%;，但在行内表单中，这些元素的宽度被设置为width: auto;，因此，多个控件可以排列在同一行。效果如图 2‑49所示：

图2-49 行内表单

如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label设置.sr-only类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如aria-label、aria-labelledby或title属性。如果这些都不存在，屏幕阅读器可能会采取使用placeholder属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。如：

1. <form class="form-inline">
2.   <div class="form-group">
3.     <label class="sr-only" for="email3">Email address</label>
4.     <input type="email" class="form-control" id="email3" placeholder="Email">
5.   </div>
6.   <div class="form-group">
7.     <label class="sr-only" for="password3">Password</label>
8.     <input type="password" class="form-control" id="assword3">
9.   </div>
10.   <div class="checkbox">
11.     <label>
12.       <input type="checkbox"> Remember me
13.     </label>
14.   </div>
15.   <button type="submit" class="btn btn-default">Sign in</button>
16. </form>

效果如图 2‑50所示：

图2-50 行内表单

注意：行内表单只适用于视口（viewport）至少在 768px 宽度时，视口宽度再小的话，表单控件就可能会换行而堆叠排列。

关于作者

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