bootstrap 官方无 .timeline 组件，需用 border-start + ps-4 构建垂直时间轴，配合 text-end/text-start 控制左右对齐，图标用 bootstrap icons，折叠功能应避免 collapse 插件而改用 max-height 过渡。
用 .timeline 类做基础时间轴不现实
Bootstrap 官方 CSS 中根本没有 .timeline 或类似内置组件。你搜到的所谓“Bootstrap 时间轴”基本是第三方自定义样式、社区片段，或是 Bootstrap 5+ 配合自定义 CSS 的组合方案。官方只提供栅格（row/col）、间距（mb-3）、边框（border-start）等底层工具类，得自己搭骨架。
实操建议：
- 别在文档里翻
timeline—— 它不存在，白费时间 - 用
col+position-relative控制左右对齐，比强行套用伪类更可控 - 时间点图标统一用
<i class="bi bi-circle-fill"></i>（需引入 Bootstrap Icons），别依赖::before生成内容，否则打印或 SSR 时易丢失
垂直时间轴：用 border-start + ps-4 搭主干线
这是最轻量、兼容性最好的做法，适用于 Bootstrap 5.2+。核心是把时间轴主线当作左侧边框，每条记录用 ps-4（padding-start）缩进内容，避免浮动或绝对定位带来的布局塌陷问题。
常见错误现象：border-left 在 RTL 页面错位、position: absolute 导致响应式断点失效、用 flex-column 后子项高度不一致导致连线歪斜。
实操建议：
- 主容器加
border-start border-2 border-dark - 每条记录用
position-relative，图标用position-absolute start-0 top-50 translate-middle居中对齐主线 - 文字内容区域加
ps-4，确保和图标水平对齐，且在 xs 断点自动转为pt-3 ps-0（顶部堆叠） - 不要给主线设固定高度 —— 用
min-height: 100vh或 JS 动态撑高，否则内容少时线条截断
时间戳对齐靠 text-end 和 text-start 切换
左右交替的时间轴（左时间右内容 / 右时间左内容）本质是文本对齐控制，不是 flex 排序。Bootstrap 的 text-start/text-end 响应式类（如 text-md-end）比写媒体查询更稳。
使用场景：新闻稿、项目里程碑、简历经历 —— 要求时间信息视觉权重高，且移动端必须堆叠。
实操建议：
- 时间戳元素加
text-md-end pe-md-3（md 起右对齐+右间距），内容区加text-md-start ps-md-3 - 避免用
float或ms-auto/me-auto—— 在col内会破坏栅格流 - 如果时间格式含空格（如
"Jan 2023"），用white-space: nowrap防止折行错位 - 注意
text-end对small标签也生效，若想时间小字但右对齐，得额外加text-sm-start覆盖
交互增强：折叠旧条目别用 collapse 插件
Bootstrap 的 collapse 插件默认依赖 height 动画，而时间轴条目高度不固定（文字行数不定），直接套用会导致展开后内容被裁切或动画卡顿。
性能影响：每个 data-bs-toggle="collapse" 都触发重排，10 条以上明显卡顿；移动端触摸反馈延迟高。
实操建议：
- 改用
max-height+overflow-y: hidden过渡，配合 JS 动态设max-height值（取scrollHeight） - 折叠按钮放在时间戳旁，用
btn btn-sm btn-outline-secondary，别用btn-link—— 点击热区太小，移动端难触发 - 首次加载只展开最近 3 条，其余加
collapsed类 +aria-expanded="false"，可访问性不丢 - 别监听
show.bs.collapse做懒加载 —— 时间轴数据通常已渲染完，纯属增加复杂度
最麻烦的其实是响应式断点下的图标偏移和文字换行——每次改字体大小或 padding，都得重新调 translate-middle 的 top 值。这点容易被忽略，但上线后在 iPad 上一测就露馅。
