bootstrap无内置垂直滚动时间轴，需用ol+伪元素画线、两层容器实现滚动、断点控制对齐与间距，并限制条目数防性能下降。
Bootstrap 没有内置的垂直滚动时间轴组件，更没有带连接点（圆点+竖线）的「timeline」类；所谓“响应式+滚动+连接点”必须手动组合 ol、伪元素、overflow-y-auto 和断点控制——漏掉任一环节，小屏错位、线条断裂、滚动失效或圆点偏移都会立刻出现。
用 ol + ::before/::after 画连接点和主线
语义化结构是稳定的基础：用 ol 包裹所有时间项，每个用 li，时间戳放 time 标签。主线由 ol::after 绘制，圆点由每个 li::before 绘制，短横线（连接圆点与内容）由 li::after 在中大屏上绘制。
-
ol必须设position: relative，否则伪元素定位失效 -
ol::after：content: ""+position: absolute+top: 0; bottom: 0; left: 1.5rem; width: 2px（主竖线） -
li::before：content: ""+position: absolute+left: 1.4rem; top: 50%; transform: translateY(-50%)+width: 12px; height: 12px; border-radius: 50%; background: #0d6efd（圆点） -
li::after：只在@media (min-width: 768px)内启用，content: ""+position: absolute+left: 0; top: 50%; transform: translateY(-50%)+width: 1.5rem; height: 2px; background: #dee2e6（横线），小屏直接display: none
滚动容器必须分层：外层负责阴影/定位，内层负责 overflow-y-auto
直接给 ol 加 overflow-y-auto 会导致圆点被裁剪、主线截断、阴影消失——因为滚动区域会把伪元素也纳入裁剪范围。正确做法是套两层容器。
- 最外层：
div加position: relative+z-index: 1+shadow-sm+border（如border border-gray-200） - 中间层：
div设max-height: calc(100vh - 200px)+overflow-y-auto+scroll-behavior: auto（显式禁用平滑滚动，防安卓白屏） - 内层：
ol不设高度，不加 overflow，只负责语义和伪元素渲染 - 移动端 Safari 需加
-webkit-overflow-scrolling: touch到中间层，否则滚动卡顿
响应式对齐与间距：别信 text-center，用断点重置 margin 和 padding
时间点（time）在小屏右对齐、大屏左对齐，不是靠 text-end text-md-start 就能搞定；文字长度差异会让圆点横向漂移，必须配合固定锚点和最小宽度。
-
time标签加min-width: 7rem（写在 style 或自定义 CSS 中），防止「Q1」或「2023」宽度不一致 - 小屏（
@media (max-width: 576px)）下，li设padding-left: 0，time设text-align: right，圆点保持在左侧固定位置 - 中大屏取消
text-align，靠li::before的left: 1.4rem锚定，time自然左对齐形成垂线 - 每项之间用
margin-bottom: 1.5rem（不用mb-4，它在 flex column 下行为不稳定）
超过 20 条时滚动性能明显下降，别硬撑
Bootstrap 不提供虚拟滚动能力，ol 里塞 50 个 li，在低端安卓机上首次渲染延迟超 800ms，滚动掉帧严重。这不是 CSS 能优化的边界。
- 服务端或客户端做分页加载，每次最多展示 15–20 条，加「加载更多」按钮
- 若必须全量渲染，用
react-window或vue-virtual-scroller替代原生ol，Bootstrap 只负责样式复用 - 禁止在
li内嵌未设height/width的图片或 iframe，否则加载时重排导致滚动跳动 - 测试重点：iPhone SE（DPR=3）、Chrome Android（WebView 旧内核）、Firefox for Android —— 这三个环境最容易暴露
max-height计算偏差和伪元素偏移
