应使用自定义 class（如 .timeline-item）配合 Bootstrap 栅格与工具类实现响应式时间轴；小屏单列堆叠，md 起用 :nth-child(odd/even) + flex-row-reverse 实现左右交替，.timeline-item 必须设 position: relative 以准确定位 .timeline-dot。
时间轴结构用 .timeline 还是自定义 class？
Bootstrap 本身不提供原生的 .timeline 组件，官方 CSS 和 JS 都没内置时间轴样式。强行套用 .list-group 或 .card 容易在小屏下错位、文字截断、图标偏移。真正可行的做法是：用 Bootstrap 的栅格（col-*）和工具类（d-none d-md-block）控制布局流向，再用少量自定义 CSS 修正垂直对齐和响应断点。
- 必须给时间轴项包裹
position: relative，否则绝对定位的时间点（如圆点）会脱离文档流 - 小屏（
xs）建议单列垂直堆叠，禁用左右分栏；中屏（md）起才启用左右交替布局 - 不要用
float实现左右切换——Bootstrap 5 已弃用float工具类，且与 Flexbox 冲突
如何让左右交替在 md 断点后生效？
左右交替不是靠 JS 动态加 class，而是用 CSS 的 :nth-child(odd) / :nth-child(even) 配合 Bootstrap 的显示工具类做条件渲染。
<div class="timeline-item">
<div class="timeline-content d-flex">
<div class="timeline-date d-md-none">2023-04</div>
<div class="timeline-text">项目启动</div>
</div>
<div class="timeline-dot"></div>
</div>
- 每个
timeline-item用flex-direction: column（小屏） - 在
md及以上，对奇数项加flex-row-reverse，偶数项保持默认flex-row - 时间点（
.timeline-dot）统一用position: absolute定位在容器中央，避免随文字换行偏移
timeline-dot 在移动端为何总偏上或消失？
根本原因是父容器没设 position: relative，且 top: 50% + transform: translateY(-50%) 在 flex 容器里受交叉轴对齐影响。
- 父元素（
.timeline-item）必须声明position: relative -
.timeline-dot的top: 50%是相对于父容器高度算的，但若父容器高度由内容撑开（无固定高），小屏下文字折行会导致高度突变，圆点“跳动” - 解决办法：给
.timeline-item设最小高度（如min-height: 120px），或改用align-items: center配合 flex 布局居中，放弃绝对定位
用 media query 还是 Bootstrap 的 visibility 类控制时间点文字？
优先用 d-none d-md-block 控制显示，而不是手写 @media (min-width: 768px)。原因很实际：
- Bootstrap 的断点值（
768px对应md）已和你的栅格、间距工具类对齐，混用自定义 media query 容易错位 -
d-md-block在 SSR 或 JS 禁用时仍生效，而 JS 控制显示会白屏闪烁 - 时间日期文字在小屏放顶部易拥挤，建议只在
md及以上右侧/左侧留白区显示，小屏合并进.timeline-text内，用<small></small>包裹并加text-muted
响应式时间轴最难的不是样式，是当内容长度差异大（比如一条 2 行，下一条 6 行）时，左右交替项的视觉节奏会被打乱——这时候得靠 min-height + justify-content: space-between 拉齐基线，而不是指望自动对齐。
