Bootstrap时间线小屏堆叠错乱的根因是Flex方向硬编码和断点缺失，应改用@media主动控制flex-direction：md以上column、sm以下row，并重置伪元素定位与gap逻辑。
Bootstrap 时间线在小屏上堆成一列怎么修
默认用
（或自定义的竖向时间线）时，小屏下节点垂直堆叠、间距错乱、箭头错位——根本不是“响应式”，只是“能显示”。问题出在 css 的断点依赖和 flex 方向硬编码上。
核心解法：不靠 Bootstrap 内置类拼凑，改用
+
主动控制流向。移动端强制横排变竖排，同时修正伪元素位置和内边距。
别用
从一开始就写死方向；在
及以上才设为
，
下用
时间点图标（如
）的
/
值必须配合方向重写，否则小屏会偏出容器
Bootstrap 5 的
在
下是水平间距，在
下是垂直间距，别指望它自动适配
用 Bootstrap 5 的栅格系统做时间线真不如用 Flex
有人试图用
+
左右交替排时间点，结果在 iPad 上错行、在手机上内容挤成一团。栅格本质是“分块布局”，而时间线是“有序流式结构”，强行套用反而破坏语义和可访问性。
真正轻量可控的做法：用
容器包住所有
，靠
和
控制对齐，再用媒体查询切换主轴。
PC 端：设
，每个
用
手机端：设
，
加
强制独占一行
避免用
类直接作用于时间点内部元素，它们会干扰 Flex 的自然流
时间线里图片/卡片宽度在响应式下溢出怎么办
常见现象：时间点里嵌了
或
.timelineflex-direction@mediaflex-columnmdflex-columnsmflex-row::beforetopleftgapflex-rowflex-column.row.col-md-6display: flex.timeline-itemflex-wrap: wrapjustify-contentflex-direction: column.timeline-itemalign-items: flex-startflex-direction: row.timeline-itemflex: 0 0 100%.col
，PC 正常，手机上横向滚动条出现。这不是时间线的问题，是子内容没约束最大宽度。
Bootstrap 的
.img-fluid
和
.card
默认只对自身生效，一旦被嵌进 Flex 容器，父级未设
min-width: 0
或
overflow: hidden
，就会撑破布局。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
给每个
.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。