Bootstrap如何实现响应式的垂直滚动时间轴布局-Bootstrap教程-PHP中文网

要让时间轴垂直滚动，必须设置 max-height（如 70vh）并配合 overflow-y: auto；html 应用语义化结构，用伪元素或 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;"

用 <ol></ol> 或 <ul></ul>，别用 <div class="row"> 套栅格——语义错、小屏堆叠乱、伪元素定位失准。 <ul> <li> <code><ol></ol> 天然有序，保留无障碍访问能力；加 list-style: none 隐藏序号即可

每个时间项用 <li> 包裹，内部用 <time></time> 标记时间，

<div class="timeline-content"> 包正文
<li>
<code><li>

设 position: relative，为后续伪元素（圆点、竖线）提供定位上下文

别给 <ol></ol> 直接加 Bootstrap 的 flex-column 类，容易和栅格冲突；包一层

<div> 再设类更稳


<h3>怎么画主线和时间点才兼容各端</h3>
<p>用伪元素画线最常用，但 Safari 对 <code>height: 100%

在 Flex 容器里支持差，容易断开；border-left 更可靠。

VPS Bootstrap

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

下载

<ol></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