<p>应直接使用 Bootstrap 5 的 py-*/px- 响应式工具类，如 py-2 py-md-3 px-4 px-md-5；基础类（如 py-2）是小屏兜底值，断点类仅在对应视口生效，多类叠加实现响应式 padding，无需手写 CSS 或媒体查询。</p>
直接用 py-* / px-* 响应式类，别写 CSS
Bootstrap 5 内置的 py-*、px-* 工具类天然支持响应式，不需要手写媒体查询或自定义 CSS。关键不是“怎么加”，而是“怎么叠加”——必须同时声明基础类和断点类，否则小屏下会失效。
py-2 这种无前缀类从 0px 起生效，是所有尺寸的兜底值；py-md-3 只在视口 ≥768px 时激活，小屏下完全不生效。多个类共存才有效：py-1 py-md-2 py-xl-3 → 小屏 0.25rem，中屏 0.5rem，超大屏 1.5rem。
错误写法：py-lg-4 单独存在 → 小屏/中屏无规则，按钮会贴边或继承父级默认 padding。
为什么 py-sm-2 在手机上没反应
因为 py-sm-2 对应 @media (min-width: 576px)，而多数手机竖屏宽度远低于这个阈值。真正起效的是 py-2 ——它从 0px 开始就管用。sm 不是 “small device”，而是 “small breakpoint”，指最小断点阈值，不是设备类型。
调试时别只靠横屏模拟：真实用户几乎不用横屏看按钮，切回竖屏再验证。打开 DevTools 的 Computed Styles 面板，看 padding-top 和 padding-bottom 最终取值来自哪条规则；如果被划掉，大概率是你漏写了基础类。
py-* 类可能被后续规则覆盖，确保你的自定义样式（如有）放在 Bootstrap CSS 之后。
组合使用 px-* 和 py-* 控制按钮热区
按钮的点击区域由 padding 直接决定。px-* 控制左右热区宽度，py-* 控制上下高度。别混用 mt-lg-3 这类 margin 类——那是控制按钮和兄弟元素的距离，不是按钮自身大小。
-
px-4 py-2→ 左右各1.5rem，上下各0.5rem，适合主操作按钮 -
px-md-5 py-md-3→ 仅在 ≥768px 时生效，小屏保持紧凑，避免移动端误触 - 如果用了图标 + 文字，注意
px-*值要足够容纳图标右侧间距，否则文字可能被裁
改完 padding 后必须检查的三处地方
按钮不是孤立元素，padding 变动会连锁影响对齐、高度、边框位置。尤其在 .btn-group 或导航栏里，容易出视觉断裂。
行高与垂直居中：.btn 默认靠 line-height 和 padding 共同撑开，增大 py-* 后若未同步调高 line-height，文字会上浮。
边框重叠逻辑：在 .btn-group 中，margin-right: -1px 依赖原始 padding 尺寸对齐边框；改完后若出现白缝或双线，得检查 .btn-group > .btn 是否被意外影响。
悬停/禁用状态：:hover 和 :disabled 下的 padding 默认继承，但某些主题扩展可能重置它；建议统一用工具类，或明确覆盖所有伪类。
