mx-auto对form失效，因form虽为块级但需明确宽度且父容器须提供居中上下文；正确做法是form加row和justify-content-center，使其成为Flex容器并用col类控制子列宽度。
直接给表单加 mx-auto 无效，因为 form 默认是块级元素，但父容器没设宽度限制或未触发自动外边距生效条件；正确做法是让表单自身成为 Flex 容器并用栅格逻辑控制子列位置。
为什么 mx-auto 对 form 失效
常见错误是给 form 单独加 mx-auto 或 text-center：前者要求元素有明确宽度（否则 auto 外边距无计算基准），后者只影响行内内容，对块级 form 的定位毫无作用。更隐蔽的问题是，若父容器已是 d-flex，再加 mx-auto 会与 justify-content 冲突，导致行为不可预测。
用 .row + .justify-content-center 居中整组输入控件
这是 Bootstrap 5 中最可靠、语义最清晰的方案——把 form 当作栅格行来用，不额外套 div，避免嵌套干扰：
-
form上同时加class="row justify-content-center"，它就既是表单又是 Flex 容器，主轴居中所有直系子列 - 输入框列用
col-5、col-md-4等固定栅格类，宽度按 12 列系统精确分配 - 按钮列改用
col-auto，防止它拉伸占满剩余空间，破坏紧凑感 - 移除父级可能存在的
d-flex、h-100、text-center，这些会覆盖或干扰栅格流
小屏占满时需清除内边距
用 container 包裹时，小屏下表单常“没撑满”——其实是 container 的 padding-left/right 和 col 自带的 padding 在起作用：
- 给
container加px-0清除左右内边距 - 给每个
col加px-0，否则input左右仍有 15px 空隙 - 不要用
w-100强撑，它会让断点切换失效；依赖col-12在 xs 下自然退化即可
真正容易被忽略的是：居中不是靠“把东西往中间推”，而是靠“让容器知道怎么分配空间”。一旦在 form 上混用 row、d-flex、text-center，Bootstrap 的栅格和 Flex 规则就会相互覆盖，最终表现取决于 CSS 层叠顺序，而非你的直觉。
