要让时间轴垂直滚动，必须设置 max-height（如 70vh）并配合 overflow-y: auto；HTML 应用语义化 <ol><li> 结构，用伪元素或 border-left 绘制主线与圆点，响应式需主动重置对齐、间距及布局方向。
直接加 overflow-y-auto 不会滚动，因为容器没高度限制——必须配 max-height 才生效；bootstrap 没内置 timeline 组件，所有“时间轴”都是手搭结构，别找 .timeline 这类不存在的类名。
怎么让时间轴内容可垂直滚动
滚动不是靠类名触发，而是靠 CSS 触发条件：内容高度 > 容器可用高度。只写 overflow-y: auto 无效。
- 必须显式设
max-height（如style="max-height: 500px;"），不能依赖父容器撑高 - 避免用
height固定值，小屏易裁切；max-height: 70vh更安全 - 用浏览器 DevTools 检查目标元素的
scrollHeight和clientHeight，确认前者大于后者 - 在
.modal-body里加滚动？它默认无max-height，得手动补：style="max-height: 70vh; overflow-y: auto;"
怎么组织 HTML 结构才不崩
用 <ol> 或 <ul>，别用 <div class="row"> 套栅格——语义错、小屏堆叠乱、伪元素定位失准。
-
<ol>天然有序，保留无障碍访问能力；加list-style: none隐藏序号即可 - 每个时间项用
<li>包裹，内部用<time>标记时间，<div class="timeline-content">包正文 -
<li>设position: relative，为后续伪元素（圆点、竖线）提供定位上下文 - 别给
<ol>直接加 Bootstrap 的flex-column类，容易和栅格冲突；包一层<div>再设类更稳
怎么画主线和时间点才兼容各端
用伪元素画线最常用，但 Safari 对 height: 100% 在 Flex 容器里支持差，容易断开；border-left 更可靠。
-
<ol>的::after画主竖线：content: ""+position: absolute+top: 0; bottom: 0; left: 1.5rem; width: 2px - 每个
<li>的::before画圆点：content: ""+position: absolute+left: 1.4rem; top: 50%; transform: translateY(-50%) - 移动端慎用
scroll-behavior: smooth，某些安卓机型会白屏；显式写scroll-behavior: auto - 时间点文字加
min-width: 7rem（内联或自定义类），防「Q1」这类短文本导致对齐偏移
小屏下怎么避免文字挤成一团
响应式不是自动适配，得主动重置对齐、间距、方向——尤其别指望 gap 在不同 flex-direction 下行为一致。
- 小屏取消左右分栏，改用堆叠：
@media (max-width: 768px)内设flex-direction: column - 时间点对齐从
text-end切到text-start，避免右侧空白拉长布局 - 每项内边距改用
pt-3 ps-0替代ps-4，防止小屏缩进过大 - 图片或卡片嵌入时间项时，外层加
overflow-x: hidden，并确保img有max-width: 100%和height: auto
真正麻烦的不是画线或滚动，而是时间点在不同分辨率下的横向定位稳定性——left: 1.4rem 在 iPad Pro 和 iPhone SE 上表现可能完全不同，得靠实际设备测，不能只看 Chrome DevTools 模拟器。
