必须用响应式类而非基础值：小屏需py-1 fs-6，中屏py-md-2 fs-md-5，大屏py-lg-3 fs-lg-4，无前缀类为xs断点兜底，fs-sm-5等不适用于手机竖屏。
小屏下改.alert的padding和font-size必须用响应式类，不能只写基础值
Bootstrap 5 的 .alert 默认 padding 是 padding: 1rem 1rem，字号是 font-size: 1rem，这两个值在手机竖屏下显得过大，文字撑出容器或留白过多。但直接写 .alert { padding: 0.5rem; font-size: 0.875rem; } 会破坏中大屏体验——必须用响应式工具类分层控制。
关键不是“能不能改”，而是“怎么让小屏紧凑、中屏舒展、大屏稳重”。Bootstrap 已内置支持，只需正确叠加：
-
py-* px-*控制垂直/水平内边距，py-1 py-md-2 py-lg-3表示：小屏 0.25rem，中屏（≥768px）0.5rem，大屏（≥992px）1rem -
fs-*控制字号，fs-6 fs-md-5 fs-lg-4表示：小屏 0.875rem，中屏 0.8125rem，大屏 0.75rem（注意 fs 数值越小字号越小） - 别漏掉基础类：
py-1是所有断点的兜底值；没它，py-md-2在手机上完全不生效 - 避免混用
pt-2 pb-2和py-2——后者更简洁且语义明确，前者容易漏写某一边
为什么加了 fs-sm-5 还是没变小？
因为 sm 断点起始宽度是 576px，而多数手机竖屏宽度 ≤ 414px（iPhone 14 Pro Max 竖屏为 430px），fs-sm-5 根本不触发。真正影响小屏的是无前缀的基础类，比如 fs-6（对应 0.875rem）。
调试时切记：不要只靠浏览器模拟器横屏看效果，真实用户几乎全用竖屏操作。验证方式是把设备宽度调到 375px 或 414px，再刷新页面。
- 小屏有效类：以
fs-*、py-*、px-*开头，无前缀或带-xs-（但 Bootstrap 5 不提供xs前缀，所以无前缀即 xs） -
fs-sm-5只在 ≥576px 生效，适合平板横屏或小尺寸笔记本，不是手机 - 如果想让超小屏（如折叠屏半开态）更紧凑，可加媒体查询：
@media (max-width: 360px) { .alert { font-size: 0.8125rem; padding: 0.375rem 0.75rem; } }
改完内边距后文字换行错位怎么办
Alert 默认用 word-break: break-word，但当 py-1 缩小到 0.25rem 后，行高（line-height: 1.5）可能撑不开内容，导致多行文字上下贴边、图标对不齐。
这不是 bug，是 padding 和 line-height 协同失效的表现。解决方案不是加大 padding，而是微调排版：
- 给
.alert加line-height: 1.4（比默认略小，适配紧凑 padding） - 若用了图标（如 SVG），确保外层有
d-flex align-items-center，否则图标和文字基线不对齐 - 长文本内含
<br>或<p></p>时，py-1可能导致段间距消失，此时应改用mb-1控制段落底部空白，而非依赖 padding - 别用
text-sm类强行缩字体——它只作用于<small></small>元素，对.alert无效
自定义 CSS 覆盖响应式类时的权重陷阱
如果你在项目样式表里写了 .alert { padding: 0.375rem; }，它大概率会被 Bootstrap 的 py-1（对应 padding: 0.25rem）覆盖——不是因为你写错了，而是工具类的 CSS 权重更高（因选择器更具体，如 [class*="py-"]）。
真要手写 CSS，必须提高权重或加 !important，但更稳妥的做法是放弃全局覆盖，改用组合类：
- 写成：
<div class="alert alert-warning py-1 py-md-2 fs-6 fs-md-5">...<li>避免同时引入多个 CSS 文件竞争：确保你的自定义样式表在 Bootstrap CSS 之后加载</li> <li>用 <code>devtools检查 computed styles，确认最终生效的是哪条规则——常有人以为改了，其实被后面加载的 CSS 覆盖了 - 如果用了 CSS-in-JS 或 scoped style（如 Vue SFC），
!important可能被隔离，此时需用属性选择器增强权重：.alert[class~="py-1"] { ... }
真正难的不是改哪几个像素，而是判断哪些地方该用工具类、哪些必须手写、哪些根本不用动——小屏 Alert 的视觉节奏，靠的是 padding、字号、行高三者咬合，差一点就显得局促或松散。
