bootstrap 5 响应式表单依赖 .form-control、栅格类和语义化结构自动适配，需用 container/container-fluid 包裹，row 内嵌 col 控制布局，label 必须 with for/id 关联，验证需添加 was-validated 类并配合 invalid-feedback。
Bootstrap 5 响应式表单不需要手动写媒体查询，核心靠 .form-control + 栅格类 + 语义化结构自动适配，但必须注意容器、断点和验证类的组合逻辑，否则在小屏上会溢出或错位。
用 container 或 container-fluid 包裹表单
没包容器，.row 和 .col 在移动端可能失效，因为 Bootstrap 5 的栅格系统依赖父级容器的 padding 和 max-width 控制响应行为。
-
container：居中、带左右 padding，适合常规表单（如登录页） -
container-fluid：100% 宽度，适合后台管理类全宽表单 - 漏掉这个 wrapper，
.col-md-6这类断点类在手机上可能不收缩，输入框直接撑破视口
row + col 控制表单项横向/纵向堆叠
Bootstrap 5 表单默认垂直堆叠，想在中大屏并排显示（比如姓名+邮箱同行），必须用栅格系统显式控制，不能只靠 .form-group。
- 写法示例：
<div class="row"> <div class="col-md-6">...</div> <div class="col-md-6">...</div> </div> -
md断点表示 ≥768px 才并排，sm（≥576px）更激进，但小屏手机容易挤不下两个输入框 - 别用
.col-6—— 它在所有屏幕都占半宽，手机上两个输入框会重叠或换行错乱
form-control 必须配合 label 和 for/id 关联
光加 form-control 类只是美化样式，不关联 label 会导致可访问性失败，且部分屏幕阅读器无法聚焦输入框，Safari/iOS 上点击 label 也不触发 focus。
- 必须确保
<label for="email"></label>和<input id="email">的值完全一致（区分大小写） - 别用
form-label替代label标签 —— 它只是样式类，不是语义标签 - 自定义控件（如开关、文件上传）要额外加
form-check-input或form-control-file，否则失去响应式间距和触控区域
验证状态类（is-valid/is-invalid）需搭配 was-validated
原生 HTML5 表单验证（required、type="email"）在 Bootstrap 5 中不会自动触发红/绿边框，必须手动激活验证上下文。
- 给
<form></form>加class="was-validated"，否则is-invalid只是静态样式，不随用户输入实时变化 - 服务端返回错误时，别只加
is-invalid，还要补invalid-feedback元素，否则提示文字不显示 - JavaScript 动态校验后，记得调用
form.checkValidity()并手动切换类，否则 UI 不同步
最易被忽略的是 was-validated 这个开关类——它不像其他类那样“写了就生效”，而是全局启用验证反馈的触发器，漏掉它，整个验证流程就卡在视觉层。另外，所有栅格列必须严格嵌套在 row 内，直接把 col 放 form 下会导致 margin 折叠和断点失效。
