py-sm-2在手机上无效，因其对应@media (min-width: 576px)，而手机竖屏宽度多为360–414px，未达阈值；真正小屏生效的是无前缀类如py-2，需移动优先、先写基础类再叠加断点类。
直接用 py-、px- 等响应式内边距工具类就能生效，但必须先写基础类（如 py-2），再叠加断点类（如 py-md-3）——只写 py-sm-2 在手机上根本不会起作用。
为什么 py-sm-2 在手机上没反应
因为 py-sm-2 对应的是 @media (min-width: 576px)，而绝大多数手机竖屏宽度在 360–414px 之间，压根达不到这个阈值。真正从 0px 就起效的是无前缀类，比如 py-2，它才是小屏实际生效的起点。
- 别靠横屏模拟调试：真实用户几乎不用横屏看按钮，切回竖屏再验证
- 打开 DevTools 的 Computed 面板，看
padding-top和padding-bottom最终取值来自哪条规则；如果被划掉，大概率是漏写了基础类，或 class 顺序写反了 -
py-sm-2不是“小屏用”，而是“≥576px 才启用”——名字里的 sm 指断点起点，不是适用范围
怎么写才真正生效：移动优先 + 断点叠加
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是否被意外影响 -
图标+文字按钮的右侧间距：含图标（如 Font Awesome 或 SVG）时，
px-*值要足够容纳图标右侧间距，否则文字可能被裁；例如px-4（左右各 1.5rem）比px-2（左右各 0.5rem）更稳妥
真正容易被忽略的，是忘记设基础类（如 py-2）——没有它，断点类在小屏下就是空转。
