本文共 1165 字，大约阅读时间需要 3 分钟。

表单

基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列效果。
在 Bootstrap 表单中，我们遵循以下原则：不要将表单组和输入框组混合使用。建议将输入框组嵌套到表单组中使用，以确保一致性和布局统一性。此外，不要直接和表单组混用，均需分别包裹于 .form-group。
内联表单
当需要在页面左侧显示表单时，可以为表单元素添加 .form-inline 类。这种方式可使表单内容左对齐，并表现为 inline-block 级别的控件。需要注意的是，这种布局方式仅适用于视口（viewport）至少在 768px 宽度时，以防止在更小的屏幕上导致表单折叠。当使用内联表单时，默认的宽度设置为 width: 100%; 需要手动修改为 width: auto;，以使多个控件能够合理排列。
在内联表单中，确保为每个输入控件设置 label 标签。如果没有为输入控件设置标签，屏幕阅读器将无法正确识别。为了解决这一问题，可以为 label 标签添加 .sr-only 类，使其仅对屏幕阅读器可见。此外，可以考虑使用 aria-label、aria-labelledby 或 title 属性作为替代方案。
水平排列的表单
为了实现水平排列的表单布局，可以为表单元素添加 .form-horizontal 类，并结合 Bootstrap 栅格系统。这样可以将 label 标签和控件组水平排布，无需额外添加   空格。通过将每个 .form-group 结合栅格类（如 col-sm-2 和 col-sm-10），可以轻松实现表单的水平布局。
例如，以下代码展示了一个典型的表单水平布局：
```html
   
  
    
    
     Email
    
     
      
      
    
     
  
    
  
    
    
     Password
    
     
      
      
    
     
  
    
  
    
    
     
      
      
        
       
           Remember me
        
      
      
    
     
  
    
  
    
    
     
      
      Sign in
    
     
  
    
   
```
请注意，切勿直接在表单组中添加额外的定位样式，应全部借助 Bootstrap 的栅格系统，以确保一致性和跨浏览器兼容性。