垂直时间轴需用语义化结构，包裹在设max-height和overflow-y: auto的容器中，并配合-webkit-overflow-scrolling: touch确保ios滚动顺滑；连接点用伪元素定位，日期用响应式d-{breakpoint}-inline类控制显示密度。
垂直时间轴的 HTML 结构怎么写才支持响应式滚动
直接用 .timeline 容器 + .timeline-item 逐条堆叠，但必须包裹在可溢出的容器里，否则移动端无法滚动。关键不是“做时间轴”，而是“让时间轴在小屏上可纵向滑动”。overflow-y: auto 要加在父容器（比如 .timeline-container），而不是时间轴本体——否则连接线会被截断。
常见错误是把 overflow 加在 .timeline 上，结果日期标签或连接点被裁掉。正确做法：
-
.timeline-container设定固定高度（如max-height: 50vh）和overflow-y: auto -
.timeline用position: relative，内部.timeline-item用position: relative或absolute控制连接点定位 - 避免给
.timeline-item设height，让它自然撑开，否则内容多时文字被压扁
连接点和日期标注的 CSS 怎么避免错位
Bootstrap 默认没有时间轴组件，得手写连接点（圆点）和日期（右侧/左侧标注）。错位主因是 flex 布局在不同屏幕下换行或对齐失效，尤其当日期文本长度不一时。
推荐用伪元素画连接点，日期用 span 独立定位：
- 连接点用
::before在.timeline-item左侧生成content: ""圆点，设position: absolute+ 固定left: -1.25rem - 日期用
<span class="timeline-date">2024-03-15</span>，放在.timeline-item内部靠右（text-align: right）或靠左（text-align: left），不依赖 float - 移动端强制日期显示在顶部（
flex-direction: column），避免和内容挤成一行导致换行错乱
别用 float: left/right 控制日期位置——Bootstrap 5 的栅格和 flex 会把它顶飞。
如何让滚动区域在 iOS Safari 正常触发惯性滚动
iOS Safari 对 overflow-y: auto 的滚动支持有坑：默认不启用惯性滚动，手指一抬就停，体验像卡顿。必须显式开启 -webkit-overflow-scrolling: touch。
这个属性只对 WebKit 有效，且仅作用于设置了 overflow 的元素：
- 在
.timeline-container上加-webkit-overflow-scrolling: touch - 同时确保该容器有
position: relative或static（不能是fixed或absolute，否则失效） - 如果用了
transform（比如动画），会禁用该特性，此时需改用will-change: scroll-position替代
没加这句的话，用户在 iPhone 上拖动时间轴会明显“粘滞”，尤其内容多时几乎没法快速浏览。
Bootstrap 5 下日期格式化和响应式断点怎么配
日期标注本身不用 JS 格式化，纯 CSS 控制显示密度：小屏隐藏年份、中屏只留月日、大屏全显。靠 Bootstrap 的 d-{breakpoint}-none 类控制可见性，比写 media query 更稳。
示例结构：
<span class="timeline-date"> <span class="d-none d-md-inline">2024-</span> <span class="d-none d-sm-inline">03-</span>15 </span>
这样在 xs 屏只显示 15，sm 屏显示 03-15，md 及以上显示 2024-03-15。注意：d-none 必须配合 d-{bp}-inline 使用，单独用 d-sm-none 会导致所有断点都不可见。
别用 JavaScript 动态插入日期——既增加首屏 JS 体积，又在 SSR 场景下出现闪动；CSS 控制更轻量也更可靠。
连接点颜色、间距、日期字体大小这些细节，在小屏上缩得太小就看不清，建议最小字号设为 0.875rem，连接点半径不小于 0.375rem，否则手指点选困难。
