Bootstrap3 行内表单

行内表单

为

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

2.   
3.     Name
4.     
5.   

  

    Email

    

  

  Send invitation

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

图2-49 行内表单

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

2.   
3.     Email address
4.     
5.   

  

    Password

    

  

  

    

       Remember me