只写 py-md-3 在手机上没效果，因其仅在视口 ≥768px 时生效，而手机竖屏宽度多为 320–414px；真正起效的是 py-2 等无前缀基础类，它从 0px 起生效，是移动优先的兜底规则。
为什么只写 py-md-3 在手机上没效果
因为 py-md-3 对应的是 @media (min-width: 768px)，而手机竖屏宽度普遍在 320–414px 之间，远低于 768px，这个类根本不会被激活。真正起作用的必须是无前缀的基础类，比如 py-2——它从 0px 开始就生效，是所有断点的兜底值。
常见错误是只写 py-lg-4，结果小屏下按钮贴边、文字挤到边框里。这不是 Bootstrap 失效，是你漏掉了“移动优先”的入口规则。
-
py-1 py-md-2 py-xl-3→ 小屏上下 0.25rem，中屏 0.5rem，超大屏 1.5rem - 断点类之间不覆盖，而是按视口宽度“条件触发”，不是“后写覆盖前写”
- 调试时打开 DevTools 的 Computed Styles 面板，看
padding-top和padding-bottom最终来自哪条规则；如果被划掉，大概率是漏了基础类或 CSS 加载顺序错了
px-* 和 py-* 怎么组合控制按钮热区
按钮的点击区域由内边距直接决定：px-* 控制左右热区宽度，py-* 控制上下高度。别混用 mt-lg-3 这类 margin 类——那是调按钮和兄弟元素的距离，不是按钮自身大小。
-
px-4 py-2→ 左右各 1.5rem，上下各 0.5rem，适合主操作按钮 -
px-md-5 py-md-3→ 仅在 ≥768px 时生效，小屏保持紧凑，避免误触 - 如果按钮含图标 + 文字，
px-*值要足够容纳图标右侧间距，否则文字可能被裁切 - 改完 padding 后，务必检查行高是否同步：增大
py-*后若line-height没变，文字会上浮偏离垂直居中
在 .btn-group 里改 padding 容易出什么问题
.btn-group > .btn 默认靠 margin-right: -1px 实现边框无缝重叠。一旦你用 py-3 或 px-4 改了内边距，原始尺寸关系就被打破，轻则出现白缝，重则双线错位。
- 不要只改单个按钮的 padding，要统一调整整个组的子项规则，或改用
gap-2（Bootstrap 5.3+）替代负 margin - 检查
:hover和:disabled状态是否继承新 padding——某些第三方主题会重置伪类样式，建议显式叠加py-3到所有状态 - 如果用了自定义 CSS，确保它放在 Bootstrap CSS 之后，否则
px-*类可能被低优先级规则覆盖
什么时候该放弃工具类，去动 Sass 变量
只有当你需要全局统一修改所有按钮的上下/左右内边距（比如把全部 .btn 的 padding-y 从 0.375rem 改成 0.625rem），才值得动 $btn-padding-y 和 $btn-padding-x。其他情况，工具类更轻量、更可控。
真要改变量，得走 SCSS 编译流程，CDN 引入的 CSS 文件里改 $btn-padding-y 是无效的。而且变量改完后，所有断点共用同一数值，无法响应式切换——这恰恰是你要避开的限制。
真正容易被忽略的，是改完 padding 后没在断点临界值（比如 767px / 768px）反复切屏验证。那 1px 的差异，就是布局错位的根源。
