Bootstrap如何实现响应式的垂直滚动时间轴带连接点和日期标注

垂直时间轴需用语义化<ol>结构，包裹在设max-height和overflow-y: auto的容器中，并配合-webkit-overflow-scrolling: touch确保iOS滚动顺滑；连接点用伪元素定位，日期用响应式d-{breakpoint}-inline类控制显示密度。

垂直时间轴的 HTML 结构怎么写才支持响应式滚动

直接用 .timeline 容器 + .timeline-item 逐条堆叠，但必须包裹在可溢出的容器里，否则移动端无法滚动。关键不是“做时间轴”，而是“让时间轴在小屏上可纵向滑动”。overflow-y: auto 要加在父容器（比如 .timeline-container），而不是时间轴本体——否则连接线会被截断。

常见错误是把 overflow 加在 .timeline 上，结果日期标签或连接点被裁掉。正确做法：

1. .timeline-container 设定固定高度（如 max-height: 50vh）和 overflow-y: auto
2. .timeline 用 position: relative，内部 .timeline-item 用 position: relative 或 absolute 控制连接点定位
3. 避免给 .timeline-item 设 height，让它自然撑开，否则内容多时文字被压扁

连接点和日期标注的 CSS 怎么避免错位

Bootstrap 默认没有时间轴组件，得手写连接点（圆点）和日期（右侧/左侧标注）。错位主因是 flex 布局在不同屏幕下换行或对齐失效，尤其当日期文本长度不一时。

推荐用伪元素画连接点，日期用 span 独立定位：

1. 连接点用 ::before 在 .timeline-item 左侧生成 content: "" 圆点，设 position: absolute + 固定 left: -1.25rem
2. 日期用 <span class="timeline-date">2024-03-15</span>，放在 .timeline-item 内部靠右（text-align: right）或靠左（text-align: left），不依赖 float
3. 移动端强制日期显示在顶部（flex-direction: column），避免和内容挤成一行导致换行错乱

别用 float: left/right 控制日期位置——Bootstrap 5 的栅格和 flex 会把它顶飞。

如何让滚动区域在 iOS Safari 正常触发惯性滚动

iOS Safari 对 overflow-y: auto 的滚动支持有坑：默认不启用惯性滚动，手指一抬就停，体验像卡顿。必须显式开启 -webkit-overflow-scrolling: touch。

这个属性只对 WebKit 有效，且仅作用于设置了 overflow 的元素：

1. 在 .timeline-container 上加 -webkit-overflow-scrolling: touch
2. 同时确保该容器有 position: relative 或 static（不能是 fixed 或 absolute，否则失效）
3. 如果用了 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，否则手指点选困难。