应通过外层容器或兄弟元素的间距工具类（如mb-3、my-0）控制.alert位置，而非直接修改.alert的margin；避免嵌套容器导致边距叠加，必要时用自定义类或Sass变量精细调整。
直接改 .alert 的 margin 会破坏响应式对齐
bootstrap 的 .alert 默认自带上下外边距（margin-bottom: 1rem），这是为了在垂直流中自然分隔相邻警告框。但如果你手动给 .alert 加 margin-top 或覆盖 margin-bottom，很容易和父容器（比如 .container 或 .row）的间距逻辑冲突，导致顶部留白异常、与其他组件错位，尤其在小屏幕下更明显。
- 别写
.alert { margin: 0; }—— 它会干掉所有默认间隔，让多个警告框“粘”在一起 - 别用
mt-5这类工具类硬顶上去 —— 若父容器是.container，它本身已有左右 padding，再加顶部 margin 可能造成视觉偏移 - 真正安全的做法：控制警告框「所在位置」的上下空间，而不是动
.alert自身
推荐方案：用间距工具类包裹 alert 元素
Bootstrap 提供了语义清晰的间距工具类（m-*, my-*, mb-* 等），它们专为这类场景设计，且支持响应式断点（如 mb-md-4）。把它们加在 .alert 的**外层容器**或**同级兄弟元素**上，比直接改 .alert 更可控。
- 单个警告框需上边距？用
<div class="mb-4"><div class="alert">...</div></div> - 多个警告框之间统一留空？给每个
.alert加mb-3，最后一个用mb-0避免多余底部空白 - 想在导航栏下方紧贴显示？把
.alert放进<div class="mt-0 pt-0">，并确保父级没额外 padding <h3>警惕嵌套容器带来的双重边距</h3> <p>常见错误是把 <code>.alert套在.container或.card-body里，又忘了这些容器自身带 padding/margin。例如：.container有左右内边距，.card-body默认有padding: 1rem，再加上.alert的margin-bottom，实际空白可能翻倍。- 检查浏览器开发者工具里 computed styles，看
margin和padding是否叠加 - 若需紧凑布局，优先删减容器层级，或用
p-0/my-0显式归零 - 避免同时用
mb-3和mt-3—— 垂直方向相邻元素只需一个方向设 margin，否则产生双倍间距
自定义 CSS 仅在工具类不够用时介入
Bootstrap 工具类覆盖不到的精细控制（比如只在手机端取消上边距、或让 warning 和 danger 类 alert 有不同底部间距），才需要写自定义 CSS。此时务必用更具体的选择器，避免全局污染。
- 写成
.alert.my-custom-spacing { margin-top: 0.5rem; }，别直接改.alert - 用媒体查询时，用 Bootstrap 断点名保持一致：
@media (max-width: 575.98px) { .alert-sm-margin { margin-bottom: 0.5rem; } } - 如果用了 Sass，建议通过
$alert-margin-bottom变量统一调整，而非散落多处 CSS
.alert本身，不如先看清它的父容器和兄弟元素是否已经贡献了足够甚至多余的空白。 - 检查浏览器开发者工具里 computed styles，看
