Bootstrap时间线小屏堆叠错乱的根因是Flex方向硬编码和断点缺失，应改用@media主动控制flex-direction：md以上column、sm以下row，并重置伪元素定位与gap逻辑。
Bootstrap 时间线在小屏上堆成一列怎么修
默认用 .timeline（或自定义的竖向时间线）时，小屏下节点垂直堆叠、间距错乱、箭头错位——根本不是“响应式”，只是“能显示”。问题出在 css 的断点依赖和 flex 方向硬编码上。
核心解法：不靠 Bootstrap 内置类拼凑，改用 flex-direction + @media 主动控制流向。移动端强制横排变竖排，同时修正伪元素位置和内边距。
- 别用
flex-column从一开始就写死方向；在md及以上才设为flex-column，sm下用flex-row - 时间点图标（如
::before）的top/left值必须配合方向重写，否则小屏会偏出容器 - Bootstrap 5 的
gap在flex-row下是水平间距，在flex-column下是垂直间距，别指望它自动适配
用 Bootstrap 5 的栅格系统做时间线真不如用 Flex
有人试图用 .row + .col-md-6 左右交替排时间点，结果在 iPad 上错行、在手机上内容挤成一团。栅格本质是“分块布局”，而时间线是“有序流式结构”，强行套用反而破坏语义和可访问性。
真正轻量可控的做法：用 display: flex 容器包住所有 .timeline-item，靠 flex-wrap: wrap 和 justify-content 控制对齐，再用媒体查询切换主轴。
- PC 端：设
flex-direction: column，每个.timeline-item用align-items: flex-start - 手机端：设
flex-direction: row，.timeline-item加flex: 0 0 100%强制独占一行 - 避免用
.col类直接作用于时间点内部元素，它们会干扰 Flex 的自然流
时间线里图片/卡片宽度在响应式下溢出怎么办
常见现象：时间点里嵌了 <img> 或 <div class="card">，PC 正常，手机上横向滚动条出现。这不是时间线的问题，是子内容没约束最大宽度。
Bootstrap 的 .img-fluid 和 .card 默认只对自身生效，一旦被嵌进 Flex 容器，父级未设 min-width: 0 或 overflow: hidden，就会撑破布局。
- 给每个
.timeline-item加min-width: 0（防止 Flex 项目不收缩） - 图片统一加
max-width: 100%+height: auto，别只信.img-fluid - 卡片类内容外层加
overflow-x: hidden，尤其当里面用了table或绝对定位元素时
用 JavaScript 动态补全时间线交互时的兼容陷阱
比如加个“点击展开详情”或“懒加载时间点”，很容易在 Safari iOS 或旧版 Chrome 上失效。不是逻辑错，是事件绑定时机和容器高度塌陷导致的。
时间线容器若用 flex-column 且子项含 height: auto，JS 插入新节点后，父容器可能没重绘高度，导致点击区域偏移或 offsetTop 计算错误。
- 插入新
.timeline-item后，手动触发一次container.offsetHeight强制重排 - 避免用
getBoundingClientRect()直接算位置，优先用offsetTop+scrollTop组合，更稳定 - 移动端慎用
hover模拟展开，iOS 不触发:hover，改用click+aria-expanded
最麻烦的其实是时间点里混用第三方组件（比如地图、图表），它们初始化时往往假设自己是静态 DOM，一旦被 Flex 容器缩放或重排，Canvas 尺寸就错。这种得在 resize 回调里显式重绘，不能只靠 CSS。
