Bootstrap响应式按钮水平定位应优先使用flex工具类而非text-center，因text-center在flex容器中无效；推荐写法是d-flex配合justify-content-md-start justify-content-center，实现大屏左对齐、小屏居中。
用 Bootstrap 的响应式工具类控制按钮水平位置
直接用 ms-auto（大屏左对齐）配合 text-center（小屏居中）就能实现，不需要写一行自定义 css。关键在于理解 bootstrap 5+ 的 flex 工具类和文本对齐类的生效范围与优先级。
为什么不能只用 text-center？
text-center 是文本对齐类，对按钮本身生效的前提是按钮是行内元素或父容器启用了文本对齐。如果按钮在 div 里且父容器是块级，默认不触发居中；更常见的是按钮被包在 form 或 navbar 这类 flex 容器里，此时 text-center 无效，必须用 flex 工具类。
- 纯文字按钮：可用
text-center+ 响应式断点类，如text-md-start text-center - flex 容器中的按钮（如
div class="d-flex"）：必须用justify-content-*或ms-auto/mx-auto - 按钮是
btn且单独成行：加mx-auto d-block可强制居中，但会破坏行内流布局
推荐写法：justify-content-md-start justify-content-center
这是最稳妥的方案——利用 flex 容器的主轴对齐控制，语义清晰、兼容性好，且不依赖按钮是否为块级：
<div class="d-flex justify-content-md-start justify-content-center"> <button class="btn btn-primary">提交</button> </div>
-
justify-content-md-start：在md（≥768px）及以上断点左对齐 -
justify-content-center：在xs和sm（ - 注意顺序：后写的类会覆盖前一个，所以把更具体的断点类放后面
- 如果父容器不是 flex，请先加
d-flex，否则工具类不生效
容易踩的坑：断点名写错、容器缺失 d-flex
常见错误包括把 md 写成 medium，或漏掉 d-flex 导致 justify-content-* 完全无效。另外，text-center 在 col 或 card-body 里看似有效，其实是靠内部 padding 或 margin 实现的“视觉居中”，并非真正居中逻辑，换结构就失效。
- 错误：
class="text-medium-start text-center"→ 正确是text-md-start - 错误：
class="justify-content-md-start"（无d-flex）→ 不起作用 - 错误：在
form标签上直接加justify-content-*→ 多数 Bootstrap 版本中form默认不是 flex 容器
真正起作用的永远是容器的 display 类型 + 对齐类组合，而不是按钮自己带什么类。
