垂直时间轴应使用语义化包裹，每个内用和.timeline-content分离时间与内容；用::after画贯穿竖线，用::before画圆点、::after画短横线；移动端通过flexbox水平滚动实现，外层加.timeline-scroller并设-webkit-overflow-scrolling: touch确保顺滑。
垂直时间轴的HTML结构怎么组织才利于响应式控制
直接套用Bootstrap的.list-group或.card容易导致时间线在小屏上错位，因为它们默认不处理“左侧时间点+右侧内容”的对齐逻辑。推荐用语义清晰的<ol></ol>包裹<li>，每个<li>内用<time></time>和<div class="timeline-content">分离时间与正文——这样既利于无障碍访问，也方便后续用CSS伪元素画线。
<p>关键点：</p>
<ul>
<li>不要用<code>.row + .col强行分左右，会破坏时间轴的语义流和小屏堆叠逻辑
<ol></ol>天然支持序号，若需隐藏可加list-style: none，但保留语义比视觉序号更重要<li>设position: relative，为后续伪元素定位打基础用::before和::after画时间线时，为什么移动端线条总断开
常见错误是只给::before设固定高度或绝对定位，没考虑小屏下<li>间距压缩、字体缩放、行高变化带来的偏移。正确做法是让主轴线（竖线）由父容器<ol></ol>的::after承担，每个时间点用<li>::before</li>画圆点，再用<li>::after</li>画连接短线——这样主轴线不会随单个项高度变化而断裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<ol>::after</ol>画贯穿全高竖线：content: ""+position: absolute+top: 0; bottom: 0; left: 1.5rem; width: 2px -
<li>::before</li>画圆点：content: ""+position: absolute+left: 1.4rem; top: 50%; transform: translateY(-50%) -
<li>::after</li>画短横线（仅中大屏）：@media (min-width: 768px)内设width: 1.5rem; left: 0，小屏直接display: none
如何让时间轴在手机上自动转为水平滚动而非堆叠错乱
Bootstrap默认没有为时间轴提供滚动容器，硬加overflow-x: auto会导致内容被截断或无法触发惯性滚动。真正可行的是用flexbox + min-width控制单个时间项，并包裹在带scrollbar-gutter: stable的容器里。
具体步骤：
- 给
<ol></ol>加display: flex; flex-wrap: nowrap; overflow-x: auto - 每个
<li>设flex: 0 0 auto; min-width: 280px（适配手机窄屏阅读宽度） - 在
<ol></ol>外层加<div class="timeline-scroller">，并设<code>padding-bottom: 8px避免滚动条遮挡底部内容 - 补充
-webkit-overflow-scrolling: touch提升iOS滚动顺滑度 - 给
<ol></ol>显式设position: relative; z-index: 1 - 把
<ol>::after</ol>（主竖线）的z-index设为-1，确保它在内容之下但仍在背景之上 -
<li>::before</li>（圆点）设z-index: 2，高于文字和卡片边框 - 避免对
<li>本身设z-index，否则可能干扰Bootstrap的stack类行为
Bootstrap 5.x与自定义CSS伪元素共存时的z-index陷阱
当时间轴嵌在.card或.modal里，常出现圆点被卡片阴影盖住、竖线被z-index层级截断的问题。这是因为Bootstrap组件自带z-index值（如.modal是1055），而伪元素默认继承父元素层级。
解决方法很直接：
伪元素的层级关系必须手动理清，靠Bootstrap默认规则根本不管用。
