调整alert小屏内边距应在外层容器加间距类（如px-2 px-sm-3）或用媒体查询加!important覆盖默认padding，因bootstrap中alert的padding为固定值且工具类无效。
Alert 小屏内边距怎么调：别动 .alert，改外层或用响应式工具类
直接给 .alert 加 px-2 或 py-1 在小屏下无效——因为 Bootstrap 的 Alert 默认不继承 padding 工具类，它的内边距是写死在 CSS 规则里的（padding: 0.75rem 1.25rem）。你加的工具类会被原始规则覆盖。
真正起效的方式只有两种：
- 在外层容器加间距类：
<div class="px-2 px-sm-3"><div class="alert">...</div></div>，让容器控制可触达区域，避免 Alert 自身 padding 被重置 - 用自定义类覆盖小屏 padding：
@media (max-width: 575.98px) { .alert { padding: 0.5rem 1rem !important; } }，注意必须带!important且放在 Bootstrap CSS 之后 - 警惕
px-sm-*类——它只在 ≥576px 生效，小屏（
Alert 字体大小响应式缩放：用 clamp()，不是 fs-* 工具类
fs-4 这类工具类是静态值，不随屏幕缩放；而 Alert 文字在窄屏下常因行宽不足导致换行错乱、字太挤。必须用 CSS 的 clamp() 实现弹性字号。
推荐写法（加在自定义样式中）：
@media (max-width: 575.98px) {
.alert {
font-size: clamp(0.875rem, 2.2vw, 1rem) !important;
}
}
-
0.875rem是下限（≈14px），防超小屏文字糊成一团 -
2.2vw是弹性主体，视口每增 100px，字号增约 2.2px -
1rem是上限（≈16px），防横屏或大字体模式下文字撑破 Alert 边框 - 必须配
line-height: 1.4（无单位），否则缩放后行高卡死，小屏文字会叠在一起
为什么不能用 .alert-sm 或 text-sm？
Bootstrap 官方没有 .alert-sm 类（v5.3 仍不支持），text-sm 也不存在——这是常见误搜结果。有人试过 text-small 或 .small，但它们只作用于内联文本，对 .alert 整体无效，且会破坏 Alert 的语义结构和边框对齐。
-
<div class="alert"><small>提示内容</small></div>只缩放文字，padding 和 border 不变，视觉比例失调 -
.alert > * { font-size: 0.9rem; }会漏掉 icon（如<svg></svg>）和关闭按钮，且无法响应式 - 真正要改的是整个 Alert 的渲染盒尺寸，不是局部文字——所以必须从
.alert根选择器出发
容易被忽略的兼容点：Alert 内图标与关闭按钮的缩放同步
Alert 里常带 <svg></svg> 图标和 × 关闭按钮，它们默认用 font-size 控制大小。如果只调 .alert 的字号，图标可能显得过大或过小。
- SVG 图标建议用
width: 1.2em; height: 1.2em;，让它随父级font-size缩放 - 关闭按钮（
<button type="button" class="btn-close"></button>）需额外设：.alert .btn-close { font-size: 1.5em; }，否则小屏下 × 太小难点击 - 若用了 Font Awesome 等图标字体，得同步改
.alert .fa的font-size，否则图标和文字比例断裂
<meta name="viewport" content="width=device-width, initial-scale=1">。
