Bootstrap无内置垂直滚动时间轴，需用栅格+overflow-y-auto+响应式间距手动搭建：container包裹，row内每项用col-auto（时间点）与col（内容）配合text-end/text-md-start对齐，设max-height并禁用scroll-behavior:smooth以保兼容性。
bootstrap 本身没有内置的「垂直滚动时间轴」组件，但可以用 col + overflow-y-auto + 灵活的间距控制实现——关键是别依赖 timeline 这类不存在的类名，得自己搭结构。
用 Bootstrap 5 的栅格和工具类搭建基础时间轴结构
响应式垂直时间轴的核心是：左侧固定时间点（可选），右侧内容随屏幕变宽而换行或堆叠；滚动区域必须明确高度限制，否则无法触发 overflow-y-auto。常见错误是直接套用卡片或列表，结果在小屏上文字挤成一团、时间点错位。
- 用
container包裹整个时间轴，内部用row+ 多个col-12 col-md-6 col-lg-4控制每项宽度（小屏单列、中屏双列、大屏三列） - 每个时间项用
position-relative，时间点用position-absolute定位到左侧（或用col-auto+col实现左右分栏） - 滚动容器必须设
max-height（如style="max-height: 500px;"），再加overflow-y-auto，否则滚动无效 - 避免用
flex-column套嵌太深，容易在 Safari 上触发渲染 bug，改用stack类或纯 margin 控制间距
让时间点对齐且不随文字长度偏移
时间点（比如「2023-05」）如果放在 col-auto 里，文字一长就撑开整个布局；如果用 position-absolute，又容易在不同分辨率下脱标。最稳的做法是用 grid 模拟两栏，但 Bootstrap 5 不原生支持 grid-template-columns 响应式切换，所以退一步用 col + text-end text-md-start 对齐。
- 每项结构建议：
<div class="row g-3"><div class="col-auto text-end text-md-start">2023-05</div><div class="col">文字说明</div></div> - 小屏时
text-end把时间点右对齐到文字末尾，避免空白拉长；中屏以上text-md-start左对齐形成统一垂线 - 时间点加
fw-bold和固定min-width: 7rem（写在 style 里），防止短时间（如「Q1」）太窄导致文字错位
滚动区域兼容性与性能注意点
overflow-y-auto 在 iOS Safari 和旧版 Android WebView 中可能卡顿，尤其内容含图片或动画时。不是所有设备都支持 scroll-behavior: smooth，强行加反而引发白屏。
- 滚动容器务必加
style="scroll-behavior: auto;"（显式关闭平滑滚动），避免某些安卓机型渲染异常 - 避免在时间轴项内用
img未设height或width，否则加载时重排导致滚动跳动 - 如果项数超过 20 条，考虑用虚拟滚动（如
react-window），Bootstrap 自身不提供该能力，硬塞太多col会拖慢首屏渲染 - 测试时重点看 iPhone SE（小屏高 DPR）和 Chrome Android，这两个环境最容易暴露
max-height计算偏差问题
真正难的不是画出时间点，而是让文字说明在各种断点下不折行异常、时间点不漂移、滚动不卡顿——这些细节没在文档里写，但上线后第一波投诉全来自这儿。
