推荐用 ul 实现时间轴，因其语义化强、利于无障碍访问；需清除 list-style 并用 Flex/Grid 控制布局，避免直接在 ul 上用 Bootstrap flex 类；节点左右交替用 :nth-child 伪类配合 margin 控制，移动端取消偏移；连线优先用 border-left 或绝对定位替代 height:100% 的伪元素；不建议默认折叠节点，应优化尺寸、字体和截断；时间戳需显式配置 toLocaleDateString 选项以统一格式。
时间轴结构用 ul 还是 div？
Bootstrap 本身不提供原生时间轴组件，得自己搭。用 ul 更语义化、更利于键盘导航和屏幕阅读器，但很多人图省事用 div 套 row/col，结果在小屏上错位或堆叠异常。
推荐用 ul，配合 list-style: none 清除默认样式，再用 Flex 或 Grid 控制流向。Bootstrap 5 的 flex-column 在移动端自动竖排，flex-row 在桌面端横排——但别直接加在 ul 上，容易被 col 的 padding 干扰，应该包一层 div 再设类。
timeline-item 的左右交替怎么写才不卡顿？
常见做法是给每个 li 加 odd/even 类手动控制左右，但维护成本高，也容易漏。更稳的方式是用 CSS :nth-child(odd) 和 :nth-child(even)，配合 margin-left / margin-right 推动内容块偏移。注意：如果用了 Bootstrap 的 offset-* 类，会和自定义 margin 冲突，导致响应断点错乱；建议统一用 margin + @media 覆盖，或者改用 ms-auto/me-auto（Bootstrap 5）。
示例关键片段：
.timeline-item:nth-child(odd) .timeline-content { margin-left: 2rem; }
.timeline-item:nth-child(even) .timeline-content { margin-right: 2rem; }
@media (max-width: 768px) {
.timeline-item .timeline-content { margin-left: 0; margin-right: 0; }
}
时间轴连线在 Safari 上断开怎么办？
用伪元素 ::before 画垂直线最常见，但 Safari 对 height: 100% 在 Flex 容器里的支持不稳定，尤其当父级高度由内容撑开时，线经常只画一半。解决方法有两个：
• 用 min-height 替代 height，并确保父容器有明确的 display: flex 和 flex-direction: column
• 改用绝对定位 + top/bottom，配合 position: relative 在 .timeline-item 上
另外，border-left 比 background 更可靠，因为后者在缩放或 DPR 变化时可能模糊或偏移。
移动端折叠时间轴节点是否值得做？
不建议默认折叠。用户点开时间轴，本意就是浏览顺序信息，强制收起反而增加操作负担。真要优化小屏体验，优先做三件事：
• 缩小 .timeline-point 的尺寸（比如从 1.25rem 改到 .9rem）
• 把日期文字从 h6 降为 small，避免行高过大
• 用 text-truncate 截断过长标题，而不是隐藏整块
如果内容确实超长（比如带代码块或表格），那就别塞进时间轴——时间轴不是内容容器，是导航索引。该拆页就拆页，该抽成 modal 就抽成 modal。
真正容易被忽略的是时间戳的时区处理。前端用 toLocaleDateString() 渲染时，不同系统 locale 可能让格式突变（比如 “Jan 1, 2024” vs “01/01/2024”），建议统一用 { year: 'numeric', month: 'short', day: 'numeric' } 配置，别依赖默认。
