<p>滚动容器必须设 max-height + overflow-y-auto，推荐 style="max-height: calc(100vh - 220px);" 并加 scroll-behavior: auto；时间点改用 col-auto + text-end/text-md-start 布局；主线用 border-start；超20条需虚拟滚动或分页。</p>
滚动容器必须设 max-height + overflow-y-auto，不能只靠 class
Bootstrap 没有 scrollable-timeline 这类内置类，overflow-y-auto 本身不生效，除非容器有明确的**高度上限**。写死 max-height: 400px 在小屏上会撑出大片空白，在大屏上又可能不够——得用响应式计算。
-
style="max-height: calc(100vh - 220px);"是最稳的写法（减去 header、nav 等固定高度） - 别依赖
h-75或vh-75：它们在 flex 容器里常被父级 padding 干扰，实际高度偏差可达 30px - 务必加
style="scroll-behavior: auto;"—— iOS Safari 和部分安卓 WebView 对smooth渲染异常，会导致白屏或滚动卡死 - 测试时重点看 iPhone SE（小屏+高 DPR），它的视口计算最容易暴露
calc()偏差
时间点对齐别用 position-absolute，改用 col-auto + text-end/text-md-start
用 position-absolute 定位时间点，在不同断点下极易脱标：小屏字体缩放后 top 值失效，中屏换行导致 left 偏移。真正可维护的做法是放弃绝对定位，回归栅格语义。
- 每个时间项用
<div class="row">，时间点放<div class="col-auto">，内容放<div class="col"> - 时间点加
text-end text-md-start：小屏右对齐（贴文字末尾），中屏起左对齐（形成垂线） - 加
style="min-width: 7rem;"到时间点元素上，防止「Q1」「Jan」这类短文本太窄，导致后续文字错位 - 避免给
col-auto内容设white-space: nowrap—— 小屏会横向溢出，破坏滚动体验
主线竖线优先用 border-start，别用伪元素 ::after
伪元素画的贯穿竖线在 Safari 上常断裂，尤其当时间项高度不一致或页面缩放时。border-start 兼容性更好，且不依赖父容器高度声明。
- 外层容器（如
<div class="container">）加border-start border-2 border-muted - 每项内容区域加
ps-4（padding-start），让文字和图标自然对齐主线 - 若需圆点图标，用
position-relative包裹整项，再用position-absolute start-0 top-50 translate-middle居中放置<div class="bg-primary rounded-circle" style="width: 1rem; height: 1rem;"></div> - 别给主线设
height: 100%—— 如果内容少，线会截断；用min-height: 100vh或 JS 动态撑高更可靠
超过 20 条就该考虑虚拟滚动，Bootstrap 不管这事
Bootstrap 自身不提供虚拟滚动能力。硬塞 50 个 col-12 会导致首屏渲染慢、滚动卡顿，尤其在低端 Android 设备上。
- 纯 CSS 方案下，超过 20 条建议手动分页，用
data-bs-toggle="collapse"折叠旧条目（但别默认折叠，用户点开就是想看全） - 若用 React/Vue，直接上
react-window或virtuoso，把 Bootstrap 的row和col套进 item renderer 即可 - 滚动容器内禁用未设
height或width的图片/iframe —— 加载时重排会引发滚动跳动 - 移动端 Safari 对
overflow-y: auto有渲染延迟，旧版需加-webkit-overflow-scrolling: touch，新版可省
真实项目里最容易被忽略的，是滚动容器的 max-height 计算必须扣掉所有固定占位元素（包括 sticky header、footer、甚至自定义的 padding-top），而不是凭感觉减个 200px。多测两轮 iPhone 和 Chrome Android，比调样式更重要。
