应使用 d-flex flex-md-column + w-100 组合：父容器设响应式 flex 布局，按钮在 md 断点下垂直堆叠并占满宽度；col-* 类无效因依赖 .row 父容器，而按钮默认 inline-block 不支持 flex 属性。
Bootstrap按钮在断点下变全宽用哪个Utility类？
直接用 col-12 或 w-100 都不行——它们不响应式；真正起作用的是 col-md-12 这类栅格类，但前提是按钮得包裹在 .row + .col 结构里。更轻量、更符合“按钮原生变宽”预期的做法是组合使用 btn + 响应式宽度类。
为什么col-*-* 不能直接加在btn上？
因为 .col-* 类依赖 flex 容器（即 .row）才能生效；单独给 <button class="btn col-md-12"></button> 加 col-md-12，在 Bootstrap 5 中会被忽略（无父级 .row 时，col 类的 flex-basis 和 max-width 不起作用）。
-
col-md-12本质是设置flex: 0 0 100%，需要父元素是display: flex - 按钮默认是
inline-block，不继承 flex 行为 - 强行加
col类但没结构支撑，CSS 规则不触发，宽度不变
推荐方案：用flex-md-column + w-100或mw-100
最简、最可控的方式是利用 Bootstrap 的响应式 flex 工具类，把按钮所在容器设为 column，并让按钮自身撑满：
<div class="d-flex flex-md-column"> <button class="btn btn-primary w-100">提交</button> </div>
-
d-flex启用 flex 布局（默认 row） -
flex-md-column在md及以上断点切为 column，此时子元素垂直堆叠 -
w-100让按钮在 column 下自然占满容器宽度 - 若按钮有最大宽度限制（如
max-width: 200px），可换用mw-100强制解除
替代写法：btn-group + flex-fill（适合多按钮场景）
如果按钮在按钮组中（比如 <div class="btn-group">），想让它在断点下独占一行且全宽，别硬塞 <code>col，改用：
<div class="btn-group d-md-block"> <button class="btn btn-primary w-100 d-md-inline">操作</button> </div>
-
d-md-block让btn-group在 md+ 下变成块级，脱离 inline 行为 -
w-100生效，按钮全宽 -
d-md-inline是保险项：防止某些主题或自定义 CSS 干预导致按钮换行后宽度异常
注意：Bootstrap 自带的 btn-group 默认禁用 w-100，所以必须显式加 d-md-block 切断其 flex 容器逻辑。
