Bootstrap 官方无 timeline 组件，需用 border-start + position-relative + ps-4 等工具类手动搭建垂直时间轴，图标用 position-absolute + translate-middle 居中，响应式切换需结合 flex-direction 与断点类，禁用第三方 jQuery 插件。
Bootstrap 本身不提供内置的 Timeline 组件，官方 CSS 和 JS 都没有 timeline 类或插件。想用 Bootstrap 快速实现时间轴，得靠自定义 HTML 结构 + Bootstrap 工具类（如 position-relative、border-start、ps-4 等）手动搭建，而不是调用某个现成函数。
用 Bootstrap 5.3+ 的边框工具类画垂直时间线
核心思路是：用一个父容器做「时间线主干」，每个时间点作为子项错位排列。Bootstrap 5.3 起支持 border-start，比老版本用伪元素更轻量可靠。
- 父容器加
position-relative和border-start border-2 border-primary，形成左侧竖线 - 每个时间项用
position-relative ms-4 ps-3向右偏移，并用bg-white p-3 rounded做气泡卡片 - 时间标签放在卡片内顶部，用
text-muted small控制样式 - 避免用
float或绝对定位，否则响应式易崩；优先用ms-*（margin-start）配合 RTL 支持
示例结构：
<div class="position-relative border-start border-2 border-primary">
<div class="position-relative ms-4 ps-3 mb-4">
<div class="text-muted small">2023-06-15</div>
<div class="bg-white p-3 rounded"><h5 class="mb-1">项目启动</h5><p class="mb-0">完成需求评审与技术选型</p></div>
</div>
<div class="position-relative ms-4 ps-3">
<div class="text-muted small">2023-08-22</div>
<div class="bg-white p-3 rounded"><h5 class="mb-1">首版上线</h5><p class="mb-0">前端 Vite + Bootstrap 5.3 部署成功</p></div>
</div>
</div>
解决时间点图标对齐错位问题
常见错误是图标（如 <i class="bi bi-circle-fill text-primary"></i>）和文字基线不齐，导致整条线歪斜。不是加 align-middle 就能修好——它只对行内元素生效，而图标常被包在 div 里。
- 把图标单独提一层，用
position-absolute top-0 start-0 translate-middle定位到时间项左上角 - 父时间项需设
position-relative，否则translate-middle失效 - 图标容器宽度设为
1rem，避免影响文本流；别用font-size: 0.5rem直接缩放，会导致translate-middle计算偏移不准 - 如果用 SVG 替代 Icon Font，记得加
vertical-align: middle属性
响应式断点下时间轴方向切换（横→竖）
移动端窄屏强行保持垂直时间轴会挤压内容。Bootstrap 的 d-{breakpoint}-* 类可以控制方向，但不能只靠显示/隐藏——要真正改变布局流。
- 默认用垂直布局（
flex-column+border-start），适合md及以上 - 在
sm下切为水平时间轴：用d-flex flex-row overflow-x-auto包裹，每个项设min-width: 280px防止折行 - 水平模式下禁用
border-start，改用border-end做分隔，最后一项加border-0 - 注意：
ps-4在水平模式下要换成pe-4，否则所有项都往右挤
避免用 jQuery 插件强行套 Bootstrap Timeline
搜 “bootstrap timeline plugin” 会看到一堆依赖 jQuery 和 Waypoints 的第三方库，比如 bootstrap-timeline（已 6 年未更新）。它们和 Bootstrap 5+ 的 CSS 变量、无 jQuery 设计冲突明显。
- 这类插件通常覆盖原生
container、row样式，导致栅格系统失效 - 动画依赖
data-*属性 + JS 初始化，但 Bootstrap 5 的data-bs-*命名规范会和它冲突 - 真正需要交互动效（如滚动触发动画）时，直接用
IntersectionObserver+animate.css更轻量可控 - 如果必须兼容旧项目，确认插件最后更新时间是否支持 Bootstrap 5.3 的
--bs-xxxCSS 变量
时间轴最难的从来不是画线，而是让每个时间点在不同设备、不同内容长度、不同 RTL/LTR 设置下都保持视觉节奏一致——这得靠工具类组合的克制，而不是堆砌插件。
