bootstrap 无内置垂直滚动时间轴，需手动组合 ol、伪元素、两层容器及断点控制；漏任一环节将导致小屏错位、竖线断裂、圆点偏移或滚动失效。
Bootstrap 没有内置垂直滚动时间轴，所谓“带连接点的响应式滚动时间轴”必须手动组合 ol、伪元素、两层容器和断点控制——漏掉任一环节，小屏错位、竖线断裂、圆点偏移或滚动失效会立刻出现。
用 ol + 伪元素画主线和圆点，别信 list-group 或 card
语义结构决定稳定性：ol 天然支持时序，每个时间项用 li，时间戳放 time 标签。伪元素负责视觉连接：
-
ol::after画贯穿主竖线：必须设position: relative到ol上，否则absolute定位失效；top: 0; bottom: 0; left: 1.5rem; width: 2px -
li::before画圆点：固定在左侧锚点，left: 1.4rem; top: 50%; transform: translateY(-50%)，尺寸用width: 12px; height: 12px; border-radius: 50% -
li::after画短横线（仅中大屏）：@media (min-width: 768px)内启用，width: 1.5rem; left: 0; top: 50%; transform: translateY(-50%)；小屏直接display: none
别用 border-start 替代主线——它在 Safari 中易因高度不一致而断裂；也别用 position-absolute 定位时间点，小屏缩放后脱标风险极高。
滚动容器必须分两层，overflow-y-auto 不能直接加在 ol 上
直接给 ol 加 overflow-y-auto 会导致圆点被裁剪、主线截断、阴影消失——因为伪元素也被纳入滚动裁剪范围。
- 最外层：
div加position: relative+z-index: 1+shadow-sm+ 边框（如border border-gray-200） - 中间层：
div设max-height: calc(100vh - 220px)+overflow-y-auto+scroll-behavior: auto；iOS Safari 旧版需加-webkit-overflow-scrolling: touch - 内层：
ol不设高度、不加overflow，只负责语义和伪元素渲染
写死 max-height: 400px 在小屏上撑空白，在桌面又不够高；h-75 或 vh-75 在 flex 容器里常被父级 padding 干扰，偏差可达 30px。
响应式对齐与间距：靠断点重置，不是靠 text-center 或栅格自动适配
时间点（time）在小屏右对齐、大屏左对齐，但文字长度差异会让圆点横向漂移——必须配合固定锚点和最小宽度。
-
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设white-space: nowrap——小屏会横向溢出，破坏滚动体验
真正起效的是断点内显式重置，而不是依赖 text-md-start 这类工具类自动切换；它们在伪元素布局中无法约束圆点横向位置。
超过 20 条时间项时，别硬撑，该分页就分页
伪元素绘制的竖线和圆点随条目数线性增加渲染压力，尤其在低端安卓机或 iOS Safari 上容易卡顿、白屏或主线断裂。
- 测试时重点看 iPhone SE（小屏 + 高 DPR），它的视口计算最容易暴露
calc()偏差 - 超 20 条建议分页，或用虚拟滚动（如
react-window或原生 IntersectionObserver + 动态加载） - 禁用
scroll-behavior: smooth——iOS Safari 和部分安卓 WebView 渲染异常，会导致白屏或滚动卡死，必须显式设scroll-behavior: auto
圆点横向位置、主线连续性、滚动顺滑度这三者在长列表下互为制约，没有银弹，只有取舍。
