bootstrap 5 官方不提供 timeline 组件，需用 flex、伪元素和响应式断点自定义实现：小屏垂直堆叠，中屏左右交替，竖线用 ::before 绝对定位，ie11 不兼容。
Bootstrap 5 里没有现成的 timeline 组件
Bootstrap 官方 CSS 框架从 v5 开始就不再提供时间轴（timeline）的内置组件，文档里查不到 class="timeline"，也没有 Timeline JavaScript 插件。你看到的所谓“Bootstrap 时间轴”基本都是社区 DIY 的样式组合，靠 flex、position 和语义化 HTML 拼出来的。
所以别浪费时间在 npm install bootstrap-timeline 这类非官方包上——大多陈旧、不维护、和 Bootstrap 5+ 的栅格/断点冲突。
- 真正能用的，是利用 Bootstrap 5 的
container、row、col+ 自定义 CSS 类实现响应式结构 - 移动端优先：默认堆叠，中屏以上才左右交替或并排对齐
- 关键不是“套组件”，而是控制
::before装饰线、节点定位、以及断点下的流向切换
用 flex-column + order 控制移动端堆叠顺序
时间轴最常翻车的是移动端节点错位：左边内容、右边圆点、右边内容…在小屏下还硬撑“左右布局”，结果溢出或重叠。正确做法是让所有条目默认垂直堆叠，再用 order 控制视觉顺序，而不是依赖浮动或绝对定位。
示例结构（每项一个 div，含时间、标题、描述）：
<div class="timeline-item d-flex flex-column"> <div class="timeline-date">2023-04</div> <div class="timeline-content">上线新后台</div> <div class="timeline-desc">基于 Vue 3 重构，接口响应提速 40%</div> </div>
- 小屏（
xs）下：所有timeline-item是flex-column，自然上下排列 - 中屏起（
md）：加flex-row，再用order-1/order-2让偶数项的日期/内容交换位置，实现左右交替效果 - 避免用
float或position: absolute—— 它们会让父容器高度塌陷，且在 Flex 布局里行为不可控
响应式连接线别用图片，用伪元素 + min-height
时间轴那根竖线（或斜线）最容易在缩放、字体放大、动态内容加载后断开或错位。用背景图或 SVG 线条会增加请求、难适配、且无法随内容伸缩。
推荐纯 CSS 伪元素方案：
.timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 1.5rem;
width: 2px;
background: #dee2e6;
}
@media (max-width: 768px) {
.timeline::before {
display: none; /* 小屏隐藏竖线，靠间距区分 */
}
}
- 竖线用
::before固定在容器左侧，top:0; bottom:0拉满高度 - 但必须给父容器设
position: relative，否则absolute会相对视口定位 - 小屏直接隐藏竖线，改用
margin-bottom隔开条目——人眼在窄屏下更习惯看“块”而非“线” - 别写死高度（如
height: 500px），否则内容变多就截断；用min-height或留白更安全
IE11 兼容？别费劲了，Bootstrap 5 本身已不支持
如果你项目还要求兼容 IE11，那就别用 Bootstrap 5 做时间轴——它的 Flexbox 实现、CSS 变量、gap 属性在 IE 里全挂。强行加 polyfill 会导致布局错乱、伪元素失效、断点失效。
- Bootstrap 5 官方明确声明：仅支持 Edge、Firefox、Chrome、Safari 的最新两个版本
- 真要兼容 IE11，退回 Bootstrap 4（用
float+clearfix模拟 timeline），或手写 Grid/Flex 回退方案（成本远高于重做） - 更现实的取舍：用
@supports (display: grid)做特性检测，给现代浏览器上炫酷的 timeline，给 IE11 返回简洁的列表（ul+li）
时间轴看着简单，但响应式下节点对齐、连接线长度、文字折行、图标居中……每个细节都得在多个断点里反复调。别指望一次写完，重点盯住 md 和 sm 两档的视觉断裂点。
