<p>Bootstrap 5 官方不提供 timeline 组件，需用 flex-column + position-relative + 自定义 CSS 实现；推荐 border-start 方案替代伪元素，响应式需结合 d-{breakpoint}-* 类控制布局方向与间距。</p>
Bootstrap 5 里没有内置 timeline 组件
别翻文档了，timeline 不是 bootstrap 官方组件，无论 v4 还是 v5 都没提供。你看到的所谓“bootstrap 时间线”，全是社区 diy 的 css 布局方案——靠 flex、position 和语义化结构硬凑出来的。
这意味着：没 data-bs-toggle="timeline" 这种东西，也没 Timeline 类名可直接用；你得自己搭骨架，再套 Bootstrap 的间距、颜色、断点类。
- 别在
node_modules/bootstrap/scss/里找_timeline.scss，它不存在 - 别指望
npm install bootstrap-timeline能和官方 CSS 无缝兼容（多数已停更或仅支持 v3） - 如果项目用的是 Bootstrap 5.3+，注意
float已被移除，老教程里靠float-left拉时间轴的写法会失效
用 flex-column + position-relative 搭基础时间轴结构
最稳的路子是放弃“复用现成组件”的幻想，用 Bootstrap 自带的 flex 工具类 + 少量自定义 CSS 控制主轴对齐和节点偏移。
核心思路：外层 flex-column 定方向，每个时间项用 position-relative，让圆点（::before）绝对定位到左侧，内容区域靠 ms-4（Bootstrap 5 的 margin 左侧缩进）错开。
<div class="d-flex flex-column">
<div class="position-relative ms-4 pb-4">
<div class="position-absolute bg-primary rounded-circle" style="width: 16px; height: 16px; left: -28px; top: 8px;"></div>
<h6 class="fw-bold">2023-05-12</h6>
<p class="mb-0">完成用户权限模块重构</p>
</div>
<div class="position-relative ms-4 pb-4">
<div class="position-absolute bg-secondary rounded-circle" style="width: 16px; height: 16px; left: -28px; top: 8px;"></div>
<h6 class="fw-bold">2023-03-07</h6>
<p class="mb-0">上线新登录流程</p>
</div>
</div>
- 圆点位置用
left: -28px是为了避开ms-4（即 1.5rem）的缩进，同时留出视觉余量 - 所有
position-absolute元素必须包裹在position-relative父容器里，否则会相对于 body 定位 - 别用
mt-*分隔条目——flex 布局下垂直间距统一用pb-4（底部 padding）更可控
响应式断点下时间轴要重排方向
手机屏上左右排列的时间轴会挤成一团，必须在小屏切为「上下堆叠」，但很多人只加 d-md-flex 却忘了重置圆点定位逻辑。
关键不是“隐藏左边圆点”，而是让小屏时圆点回到内容左侧、不悬空，且时间文字左对齐——否则会出现圆点飘在行首上方、文字缩进错乱的问题。
- 给外层加
d-flex flex-md-row，在 md 及以上才横排 - 小屏时删掉
position-absolute和left偏移，改用text-start对齐标题 - 圆点改用
me-3（右侧 margin）紧贴文字，而不是靠绝对定位硬拉 - 别依赖媒体查询手写 CSS，优先用 Bootstrap 的
d-{breakpoint}-*和ms-{breakpoint}-*类控制显隐和间距
用 border-start 替代伪元素画时间线（更轻量）
如果你只需要一条竖线贯穿，不用圆点或图标，border-start 是最省事的选择——它比 ::before 更少触发重排，也不用算像素偏移。
配合 ps-4（padding-start）把内容往右推，整条线就自然成了时间轴主干。
<div class="border-start border-secondary ps-4">
<div class="mb-4">
<h6 class="fw-bold">2023-05-12</h6>
<p class="mb-0">完成用户权限模块重构</p>
</div>
<div class="mb-4">
<h6 class="fw-bold">2023-03-07</h6>
<p class="mb-0">上线新登录流程</p>
</div>
</div>
-
border-start在 RTL（从右向左）布局下会自动变成border-end，比固定写border-left更健壮 - 竖线粗细用
border-start-width（如border-start-width-2）控制，颜色用border-start-{color} - 如果某一项需要高亮（比如当前步骤），直接加
border-start-primary，无需额外样式
min-height 或父级高度约束——时间轴在空内容或动态加载时可能塌陷，导致绝对定位的圆点飞走。这点没法靠类名解决，得看具体场景补 min-height: 1px 或用 JS 监听内容变化。 
