Bootstrap 5 中多 Toast 或 div 垂直堆叠需显式设置 flex-column、定位容器及动态插入；div 居中堆叠须用 d-flex flex-column align-items-center justify-content-center；五列布局应使用 row-cols-5 而非 col-5；须禁用 float 等旧式布局干扰。
如果您在使用 Bootstrap 5 实现多条 Toast 或多个 div 的垂直堆叠与有序排列时发现元素重叠、错位或无法居中，则问题通常源于 Flex 主轴方向未显式设置、容器缺失定位类，或未启用堆叠调度逻辑。以下是解决此问题的步骤：
一、使用 toast-container + flex-column 实现 Toast 垂直堆叠
Bootstrap 5 的 .toast 元素默认无内置堆叠调度器，多个 Toast 若直接插入 DOM 会重叠覆盖；必须通过包裹在具有定位和垂直弹性布局的容器中，并按顺序动态插入节点，才能实现可靠堆叠。
1、在 HTML 中创建带定位与垂直流的容器：<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1090;">
2、为该容器添加 d-flex flex-column 类，确保子元素沿垂直主轴排列。
3、每次生成新 Toast 时，使用 JavaScript 动态创建元素并调用 appendChild() 插入到容器末尾，而非拼接 innerHTML。
4、对每个 Toast 调用 bootstrap.Toast.getInstance(el)?.show() 显式触发显示，避免依赖自动初始化。
二、使用 d-flex + flex-column + 居中类实现 div 垂直堆叠居中
Bootstrap 5 默认 d-flex 容器采用 flex-direction: row（水平主轴），即使添加 align-items-center 和 justify-content-center，子元素仍并排显示；必须显式切换主轴方向为 column 才能实现纵向堆叠与整体居中效果。
1、定义外层容器：<div class="d-flex flex-column align-items-center justify-content-center vh-100">
2、内部所有需要堆叠的 div 直接作为子元素写入，不添加额外浮动或 display 样式。
3、如需控制间距，使用 Bootstrap 间距工具类（如 mb-3、mt-2），禁止依赖 margin/padding 模拟堆叠逻辑。
4、确保父容器有明确高度约束（如 vh-100、min-height: 100vh），否则 justify-content-center 可能失效。
三、通过 row-cols-5 + col 实现栅格内五列等分布局
Bootstrap 5 栅格系统基于 12 等分设计，原生不支持 col-5 类；若强行使用，浏览器将忽略该类导致布局回退为单列；正确方式是利用 row-cols-* 工具类驱动行级均分逻辑，兼容响应式断点且无需自定义 CSS。
1、创建行容器并添加 row row-cols-5 类：<div class="row row-cols-5">
2、在该行内放置任意数量的 .col 元素（可少于 5 个），每个 .col 将自动获得 20% 宽度并等距分布。
3、如需响应式控制，改用 row-cols-sm-2 row-cols-md-3 row-cols-lg-5 组合类，在不同断点下切换每行列数。
4、避免在 .col 上叠加 float、inline-block 或 width 声明，防止破坏 Flex 布局流。
四、禁用浮动与旧式布局干扰，强制启用 Flex 流
Bootstrap 5 已完全弃用 float 布局，所有栅格与工具类均基于 Flexbox 构建；若页面中残留 float: left、display: inline-block 或清除浮动代码，将导致 .row 内部子元素脱离 Flex 流，出现错位、换行异常或堆叠失效。
1、全局搜索并移除所有 float 相关声明（包括 float-left、float-right、clear-both 等）。
2、检查所有 .col 元素是否意外设置了 display: inline-block 或 width 固定值，予以删除。
3、确认所有栅格结构均嵌套在合法容器中：<div class="container"> <div class="row"> <div class="col">
4、使用浏览器开发者工具检查 computed styles，验证 flex-direction 是否为 column（堆叠场景）或 row（默认），并确认父容器 display 值为 flex。
