垂直时间轴应使用语义化包裹，每个内用和.timeline-content分离时间与内容；用::after画贯穿竖线，用::before画圆点、::after画短横线；移动端通过flexbox水平滚动实现，外层加.timeline-scroller并设-webkit-overflow-scrolling: touch确保顺滑。

垂直时间轴的HTML结构怎么组织才利于响应式控制

直接套用Bootstrap的.list-group或.card容易导致时间线在小屏上错位，因为它们默认不处理“左侧时间点+右侧内容”的对齐逻辑。推荐用语义清晰的

包裹

，每个

内用和

分离时间与正文——这样既利于无障碍访问，也方便后续用CSS伪元素画线。

关键点：

• 不要用.row + .col强行分左右，会破坏时间轴的语义流和小屏堆叠逻辑
• 天然支持序号，若需隐藏可加list-style: none，但保留语义比视觉序号更重要
• 每个
• 设position: relative，为后续伪元素定位打基础

用::before和::after画时间线时，为什么移动端线条总断开

常见错误是只给::before设固定高度或绝对定位，没考虑小屏下

间距压缩、字体缩放、行高变化带来的偏移。正确做法是让主轴线（竖线）由父容器

的::after承担，每个时间点用

::before

画圆点，再用

::after

画连接短线——这样主轴线不会随单个项高度变化而断裂。

实操建议：

• ::after
  画贯穿全高竖线：content: "" + position: absolute + top: 0; bottom: 0; left: 1.5rem; width: 2px
• ::before
画圆点：content: "" + position: absolute + left: 1.4rem; top: 50%; transform: translateY(-50%)
• ::after
画短横线（仅中大屏）：@media (min-width: 768px)内设width: 1.5rem; left: 0，小屏直接display: none

如何让时间轴在手机上自动转为水平滚动而非堆叠错乱

Bootstrap默认没有为时间轴提供滚动容器，硬加overflow-x: auto会导致内容被截断或无法触发惯性滚动。真正可行的是用flexbox + min-width控制单个时间项，并包裹在带scrollbar-gutter: stable的容器里。

具体步骤：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 给
  加display: flex; flex-wrap: nowrap; overflow-x: auto
• 每个
• 设flex: 0 0 auto; min-width: 280px（适配手机窄屏阅读宽度）
• 在
  外层加
  ，并设padding-bottom: 8px避免滚动条遮挡底部内容
• 补充-webkit-overflow-scrolling: touch提升iOS滚动顺滑度

Bootstrap 5.x与自定义CSS伪元素共存时的z-index陷阱

当时间轴嵌在.card或.modal里，常出现圆点被卡片阴影盖住、竖线被z-index层级截断的问题。这是因为Bootstrap组件自带z-index值（如.modal是1055），而伪元素默认继承父元素层级。

解决方法很直接：

• 给
  显式设position: relative; z-index: 1
• 把
  ::after
  （主竖线）的z-index设为-1，确保它在内容之下但仍在背景之上
• ::before
（圆点）设z-index: 2，高于文字和卡片边框
• 避免对
• 本身设z-index，否则可能干扰Bootstrap的stack类行为

伪元素的层级关系必须手动理清，靠Bootstrap默认规则根本不管用。