应避免直接修改 .alert 的 padding，因其依赖子元素间距撑开内容，直接设置会导致文字贴边、图标错位、关闭按钮溢出；推荐使用内置 .alert-body 容器包裹内容并施加 padding 类。
直接改 .alert 的 padding 会出问题
Bootstrap 的 .alert 默认没有设置 padding，它靠内部的 .alert-heading、.alert-link 等子元素的默认间距撑开内容区域。你如果写 .alert { padding: 1rem; }，确实能生效，但容易导致：文字贴边、图标错位、多行文本换行异常；更关键的是，.alert-dismissible（带关闭按钮的警告框）右侧关闭按钮会被挤出可视区，尤其在小屏下。
优先用 .alert-body 包裹内容再调内边距
真正安全可控的做法是：不碰 .alert 本身，而是把内容包进一个带 padding 的容器里，比如 .alert-body（Bootstrap 5.3+ 已内置该类，语义明确且不影响响应式逻辑）。
- HTML 写法：
<div class="alert alert-warning"><div class="alert-body p-3">警告内容</div></div> -
.alert-body是空样式占位符，所有 padding 类（如p-3、pt-2、pe-4）都能直接作用于它，不会干扰箭头、边框或关闭按钮定位 - 若项目用的是旧版 Bootstrap（.alert-body { display: flex; flex-direction: column; }，再加 padding 类
自定义 padding 值时注意左右不对称风险
警告框常含图标（<svg></svg>）或关闭按钮（<button type="button" class="btn-close"></button>），它们依赖右侧留白。硬写 padding-right: 0.5rem 可能让关闭按钮被裁掉。
- 安全右边界：至少保留
1.5rem（即pe-4），确保.btn-close完全可见 - 左侧/顶部/底部可自由调整，例如
ps-3 pt-2 pb-2能让文字离左、上、下边缘更宽松，又不碰右 - 别混用
p-3和pe-4——后者会覆盖前者，最终只生效pe-4
需要全局统一？改 Sass 变量比 CSS 覆盖更稳
如果你在维护一个 Sass 编译项目，想让所有 .alert 默认带内边距，直接改 $alert-padding-y 和 $alert-padding-x 变量最可靠——它会自动影响所有变体（.alert-primary、.alert-dismissible 等），且不会漏掉 :hover 或 .show 状态。
- 变量必须在
@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/bootstrap"之前定义 - 例如：
$alert-padding-y: 0.75rem; $alert-padding-x: 1.25rem; - CDN 项目无法用此法；强行写
.alert { padding: ... }必须同步覆盖所有尺寸和状态类，否则上线后某处警告框高度突变
.btn-close 还在框里、图标没被压扁、移动端展开后文字不溢出——这些都得在真机上点开看，光靠 DevTools 的 computed 样式看不出全部问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
