必须先写基础类py-2再叠加断点类，否则小屏下无效果；py-sm-2在手机竖屏不生效因阈值576px高于390px；调试需用DevTools验证computed styles并检查对齐、行高、边框及伪类状态。

直接用 py-* / px-* 响应式类，别写 CSS

Bootstrap 5 内置的 py-*、px-* 工具类天然支持响应式，不需要手写媒体查询或覆盖 .btn 的 padding。关键不是“怎么加”，而是“怎么叠加”——漏掉基础类，断点类就等于没写。

• 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)，而多数手机竖屏宽度（如 iPhone 13 是 390px）根本达不到这个阈值。真正起效的是 py-2——它从 0px 开始就管用。

• sm 不是 “small device”，而是 “small breakpoint”，指最小断点阈值，不是设备类型
• 调试时别只靠横屏模拟：真实用户几乎不用横屏看按钮，切回竖屏再验证
• DevTools 的 Computed Styles 面板里能看到哪个规则真正在起作用；如果 padding-top 被划掉，大概率是漏写了基础类

改完 padding 后必须检查的三处地方

按钮不是孤立元素，padding 变动会连锁影响对齐、高度、边框位置。尤其在 .btn-group 或导航栏里，容易出视觉断裂。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 行高与垂直居中：.btn 默认靠 line-height 和 padding 共同撑开；增大 py-* 后若未同步调高 line-height，文字会上浮
• 边框重叠逻辑：在 .btn-group 中，margin-right: -1px 依赖原始 padding 尺寸对齐边框；改完后若出现白缝或双线，得检查 .btn-group > .btn 是否被意外影响
• 悬停/禁用状态：:hover 和 :disabled 下的 padding 默认继承，但某些主题扩展可能重置它；建议统一用工具类，或明确覆盖所有伪类

什么时候该放弃工具类，改 Sass 变量

只有当你需要全局统一修改所有按钮的 padding（比如把所有 .btn 的上下 padding 都从 0.375rem 改成 0.625rem），才值得动 $btn-padding-y 和 $btn-padding-x 变量。

• CDN 引入项目无法改变量，只能用工具类
• 用了 Sass 编译，也必须确认变量在 @import Bootstrap 之前定义，否则无效
• 改完必须重新编译 CSS，并检查浏览器 DevTools 里 .btn 的 computed padding 是否已更新

真正容易被忽略的，是忘记设基础类（如 py-2）——没有它，断点类在小屏下就是空转。