### 使用 `form-group` 创建表单元素 在 Bootstrap 中，`form-group` 类用于包裹表单控件及其关联的标签或其他组件，从而提供一致的间距和布局。这有助于确保表单各部分之间的视觉一致性。 对于简单的垂直排列表单，可以通过如下方式构建： ```html <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ``` 为了实现水平布局的表单，可以在 `<form>` 上应用 `.form-horizontal` 类，并利用栅格系统来控制 label 和输入字段的位置[^2]。此时，`.form-group` 将自动适应作为行容器的角色，而不再需要显式的 `.row` 容器。 例如，创建一个两列结构（左侧为标签，右侧为输入框）的水平表单： ```html <form class="form-horizontal"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group row"> <div class="offset-sm-2 col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form> ``` 上述例子展示了如何使用 `form-group` 来组织不同类型的表单项，无论是标准的垂直形式还是更复杂的水平布局。每种情况下都强调了保持良好的用户体验的重要性，比如适当的空间分配、清晰的提示信息等[^1]。