只写 py-md-3 在手机上没反应，因为其对应 @media (min-width: 768px)，而手机竖屏宽度通常为360–414px，未达阈值；真正起效的是无前缀基础类如 py-2（从0px起生效），漏写它会导致小屏按钮贴边或文字裁切。
为什么只写 py-md-3 在手机上没反应
因为 py-md-3 对应的是 @media (min-width: 768px)，而绝大多数手机竖屏宽度在 360–414px 之间，根本达不到这个阈值。真正起效的必须是无前缀的基础类，比如 py-2——它从 0px 开始就生效，是所有断点的兜底值。
常见错误是只写 py-lg-4，结果小屏下按钮紧贴边框甚至文字被裁切。这不是工具类失效，而是你漏掉了小屏入口规则。
- 调试时务必切回手机竖屏模式验证，别依赖横屏模拟
- 打开 DevTools 的 Computed Styles 面板，看
padding-top和padding-bottom最终来自哪条规则；如果被划掉，八成是基础类缺失或 CSS 加载顺序错位 -
py-sm-2也不是“给小设备用的”，它只在 ≥576px 生效，实际常用于折叠菜单展开后的平板横屏场景
怎么组合 py-* 和 px-* 实现热区可控
按钮点击区域由 padding 直接决定：py-* 控制上下高度（影响误触率），px-* 控制左右宽度（影响图标+文字的容纳空间）。别混用 mt-lg-3 这类 margin 类——那是推兄弟元素的，不改变按钮自身尺寸。
-
px-4 py-2→ 左右各 1.5rem，上下各 0.5rem，适合主操作按钮（如“提交”） -
px-md-5 py-md-3→ 仅在 ≥768px 时生效，小屏保持紧凑，避免拇指误点相邻项 - 若按钮含图标 + 文字，
px-3可能不够：图标右侧需额外留白，建议起步用px-4或加pe-4单独控制右内边距
改完 padding 后必须检查的三处连锁反应
按钮不是孤立 DOM 节点，padding 变动会牵动对齐、高度、边框逻辑，尤其在组合场景里容易翻车。
-
行高与文字垂直居中：
.btn默认靠line-height和padding共同撑开；增大py-*后若未同步调高line-height，文字会上浮——可直接加lh-1或用fs-*搭配微调 -
按钮组边框重叠失效：
.btn-group > .btn依赖原始padding尺寸实现margin-right: -1px对齐；改完后若出现白缝或双线，得检查是否需手动覆盖.btn-group > .btn的margin-right -
悬停/禁用状态异常：
:hover和:disabled默认继承padding，但某些第三方主题会重置它；建议统一用工具类（如py-2 py-md-3），或显式写.btn:hover, .btn:disabled { padding: ... }
什么时候该放弃工具类，改 Sass 变量
只有当你需要全局统一修改所有按钮的内边距（比如把全部 .btn 的上下 padding 从 0.375rem 改成 0.625rem），才值得动 $btn-padding-y 和 $btn-padding-x 变量。
- 纯 CSS 项目或 CDN 引入方式无法使用变量，硬写
.btn { padding: ... }极易被 Bootstrap 原生规则覆盖，且难以覆盖.btn-sm、.btn-lg等变体 - 若只是个别按钮需特殊处理，优先用工具类叠加，例如
btn btn-primary py-1 py-md-2 px-3 px-md-4 - 改变量后必须重新编译 SCSS，否则无效；检查浏览器里
.btn的 computedpadding是否已更新
