py-sm-2在手机上没反应，因其对应@media (min-width: 576px)，而手机竖屏宽度多为360–414px，未达阈值；真正起效的是py-2等无前缀类，从0px起生效，需遵循移动优先+断点叠加原则。
为什么 py-sm-2 在手机上没反应
因为 py-sm-2 对应的是 @media (min-width: 576px)，而多数手机竖屏宽度在 360–414px 之间，根本达不到这个断点阈值。真正从 0px 就起效的是无前缀类，比如 py-2 —— 它才是小屏实际生效的起点。
调试时别只靠横屏模拟：真实用户几乎不用横屏看按钮，切回竖屏再验证。打开 DevTools 的 Computed 面板，看 padding-top 和 padding-bottom 最终取值来自哪条规则；如果被划掉，大概率是漏写了基础类，或 class 顺序写反了。
怎么写才真正生效：移动优先 + 断点叠加
Bootstrap 的响应式内边距不是“后覆盖前”，而是按视口宽度匹配激活。必须先设基础值（从 xs 起效），再叠加断点类：
-
py-2 py-md-3 py-xl-4→ 小屏上下各 0.5rem，≥768px 变成 0.75rem，≥1200px 变成 1rem - 只写
py-lg-4是错的：小屏下没规则管它，按钮会贴边或继承父级默认 padding - 不要混用
py-3和mt-lg-3：前者改按钮自身热区，后者调按钮和兄弟元素距离，作用对象完全不同
改完 padding 后必须检查的三处地方
按钮不是孤立元素，padding 变动会连锁影响对齐、高度、边框位置：
-
行高与垂直居中：
.btn默认靠line-height和padding共同撑开；增大py-*后若未同步调高line-height，文字会上浮 -
边框重叠逻辑：在
.btn-group中，margin-right: -1px依赖原始 padding 尺寸对齐边框；改完后若出现白缝或双线，得检查.btn-group > .btn是否被意外影响 -
悬停/禁用状态：
:hover和:disabled下的 padding 默认继承，但某些主题扩展可能重置它；建议统一用工具类，或明确覆盖所有伪类
图标+文字按钮的右侧间距容易被忽略
如果按钮含图标（如 Font Awesome 或 SVG），px-* 值要足够容纳图标右侧间距，否则文字可能被裁。例如 px-4（左右各 1.5rem）比 px-2（左右各 0.5rem）更稳妥。
真正容易被忽略的，是忘记设基础类（如 py-2）——没有它，断点类在小屏下就是空转。
