Bootstrap无内置垂直时间轴，需手动搭建：滚动容器须设max-height+overflow-y-auto，图标用position-absolute居中，背景色设于时间项整体并用语义类，竖线用border-start而非伪元素，圆点图标用div而非i标签。
Bootstrap 没有内置的垂直时间轴组件，带图标和背景色的响应式时间轴必须手搭结构——关键不是“怎么加图标”，而是“图标和背景色如何不破坏滚动、对齐与语义”。
滚动容器必须设 max-height + overflow-y-auto，否则图标和背景色会撑满全页
常见错误是只加 overflow-y-auto，但父容器没高度限制，结果整个页面被背景色填满，图标错位，滚动失效。
-
max-height必须显式设置，推荐用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-relative + position-absolute 居中，别塞进 col-auto
把图标硬塞进 col-auto 会导致小屏文字换行后图标偏移、背景色断裂；用栅格分栏对齐时间点，再单独定位图标才稳。
- 每个时间项外层加
position-relative - 图标用
position-absolute start-0 top-50 translate-middle居中到主线左侧 - 图标容器加
z-index: 2，避免被后续内容遮挡 - 背景色不要直接设在图标上，而应设在时间项整体（
div），再用ps-4留出图标空间
背景色按状态分类，用 bg-{color} + text-{color} 组合，别硬写 style
手动写 background-color 和 color 会破坏 Bootstrap 主题切换能力，也难适配深色模式。
- 用现成语义类：如
bg-success+text-success-emphasis表示成功事件 - 自定义色值请走 CSS 自定义属性：
--bs-bg-opacity: .1;配合bg-opacity-10控制透明度 - 避免给
timeline-content单独设背景——它应继承时间项背景，否则竖线（border-start）会被遮盖 - 若需渐变背景，用
bg-gradient类，但注意 Safari 对background-clip支持不稳定，慎用文字裁剪效果
竖线用 border-start，别用伪元素，否则背景色+图标会错位
伪元素 ::after 画的主线在 Safari 上极易断裂，尤其当背景色不透明、图标绝对定位、或内容高度不一致时。
- 外层容器（如
<ol>）加border-start border-2 border-muted - 每项内容区域加
ps-4，让文字自然对齐主线，图标居中位置不受影响 - 主线不设
height：用min-height: 100%或 JS 动态撑高更可靠，否则内容少时线会截断 - 圆点图标统一用
<div class="bg-primary rounded-circle" style="width: 1rem; height: 1rem;"></div>，别用font-awesome的<i>—— 后者尺寸受字体缩放干扰大
真正麻烦的从来不是加图标或背景色，而是它们叠加后对滚动触发、伪元素定位、栅格语义的连锁干扰。每次加一个视觉元素，都得重新验证 scrollHeight > clientHeight、getBoundingClientRect() 偏移、以及 iPhone 上的渲染一致性。
