Bootstrap 官方无 .timeline 组件，推荐用 border-start + ps-4 构建响应式时间轴；图标用 标签保障可访问性与打印兼容，时间戳须含 datetime 属性。
Bootstrap 官方没有 .timeline 组件，所谓“漂亮的时间轴”全是靠基础工具类 + 少量自定义 CSS 搭出来的。别找 data-bs-toggle="timeline" 或 bootstrap-timeline 包——它们不是官方的，也不稳定。
用 border-start + ps-4 搭垂直主线最稳
这是 Bootstrap 5.2+ 响应式时间轴的默认推荐路径，不依赖伪元素、不碰 float、不写 JS 就能撑满高度。
- 主容器加
border-start border-2 border-dark，线条就是左侧边框，天然适配 RTL（右到左）页面 - 每条记录用
position-relative，图标用（需引入 Bootstrap Icons），再加position-absolute start-0 top-50 translate-middle居中对齐主线 - 内容区域统一加
ps-4，确保文字和图标水平对齐；小屏下加pt-3 ps-0 d-md-flex自动转为顶部堆叠 - 别设
height: 100vh—— 改用min-height: 100vh或让内容自然撑高，否则条目少时主线会截断
text-start/text-end 控制左右交替比 flex 排序更可靠
左右交错布局（左时间右内容 / 右时间左内容）本质是文本对齐问题，不是 flex 主轴方向切换。
- 时间戳加
text-md-end pe-md-3（md 起右对齐+右间距），内容区加text-md-start ps-md-3 - 避免用
ms-auto或me-auto—— 在col内会破坏栅格流，且在 Safari 旧版中失效 - 若时间含空格（如
"Jan 2023"），加white-space: nowrap防止折行错位；small标签也会被text-end影响，需额外加text-sm-start覆盖
折叠旧条目别用 collapse 插件
collapse 是为模态框、手风琴设计的，用在时间轴上会导致 DOM 重排抖动、过渡卡顿，且 SSR 渲染时容易出错。
- 改用
max-height+overflow-y: hidden过渡：初始设max-height: 0，展开后设为具体值（如max-height: 500px） - 配合
transition: max-height 0.3s ease-in-out，比collapse的 height 动画更平滑 - JS 控制只需切换一个 class，不用初始化
bootstrap.Collapse实例，减少 bundle 体积
真正容易被忽略的是时间点图标的可访问性与打印兼容性：::before 生成的圆点在打印预览里常消失，svg 或 标签才能保证语义和渲染一致；另外，所有时间戳必须带 datetime 属性（如 ），否则屏幕阅读器无法识别时间语义。
