Bootstrap官方无.timeline组件，水平时间轴须用flex-row+min-width实现：外层flex-nowrap overflow-x-auto，条目设flex: 0 0 auto与min-width: 280px，配合scrollbar-gutter: stable和padding-bottom: 8px保障滚动体验。
水平时间轴用 flex-row + min-width 最稳
bootstrap 官方没有 .timeline 组件，所谓“水平时间轴”必须靠 display: flex 主动控制流向，不能依赖 .row/.col —— 后者在小屏下容易错行、撑破容器，且语义混乱。真正在生产环境跑得稳的方案，是外层设 flex-nowrap overflow-x-auto，每个条目用 flex: 0 0 auto + min-width: 280px（适配窄屏阅读宽度）。
- 必须给外层容器加
scrollbar-gutter: stable，否则 iOS 滚动时内容会被遮挡 -
-webkit-overflow-scrolling: touch要补上，不然 Safari 滚动卡顿 - 别用
width: 25%或col-3等栅格类，它们在 flex 容器里会失效或冲突 - 每个条目内文字用
text-truncate防溢出，图标统一用<i class="bi bi-circle-fill"></i>，别用伪元素
移动端滚动条不显示或截断怎么办
常见现象是加了 overflow-x: auto 却没滚动条，或者滚动后底部内容被遮住。这不是 CSS 写错了，而是容器缺乏基础滚动保障机制。
- 外层容器必须设
padding-bottom: 8px，给滚动条留出物理空间 -
overflow-x: auto要配合min-height: 1px（防止 Safari 渲染塌陷） - 如果用了
position: sticky或transform，会触发新层叠上下文，导致滚动条消失 —— 改用top: 0+z-index替代 - 测试时别只看 Chrome，iOS 16+ 的 WebKit 对
scroll-behavior: smooth支持仍不稳定，慎用
左右交替布局在水平时间轴里根本不需要
垂直时间轴常搞左/右交错，但水平时间轴天然就是从左到右顺序排列。硬套 :nth-child(odd) 做样式翻转，反而破坏阅读流、增加维护成本。
- 时间戳统一用
text-center，内容区也居中，视觉更平衡 - 若需强调某条目（如当前事件），加
border-primary或shadow-sm即可，不用改位置 - 避免用
ms-auto/me-auto推偏移 —— 在 flex-row 里它会让条目脱离自然顺序，SSR 渲染时易错位 - 图标颜色用
text-primary或bg-primary控制，别写死 hex 值，方便主题切换
图片或卡片嵌入后横向溢出怎么收住
水平时间轴里塞 <img> 或 <div class="card"> 是高频踩坑点：PC 正常，手机一拉就横向滚动条爆出来，不是时间轴的问题，是子元素没约束。
<ul>
<li>
<code><img> 必须同时加 img-fluid 和 mx-auto d-block，否则 max-width: 100% 在 flex 里可能失效
<div class="card"> 外层包一层 <code>overflow-hidden，卡片内部用 h-100 + overflow-y-auto 控制高度
table，必须在外层加 table-responsive，否则 table 会强制撑宽max-width: 100vw，防 Safari 下定位偏移<ol></ol> 包裹条目比 <div> 更合理，<code><time datetime="2023-01-15"></time> 必须存在，否则屏幕阅读器无法识别时间信息；而滚动容器要加 aria-label="时间轴，可左右滑动浏览"，不然残障用户根本不知道能滚。
