怎么用Bootstrap制作时间轴(Timeline)-Bootstrap教程-PHP中文网

Bootstrap 官方无 timeline 组件，需用 border-start + position-relative + ps-4 等工具类手动搭建垂直时间轴，图标用 position-absolute + translate-middle 居中，响应式切换需结合 flex-direction 与断点类，禁用第三方 jQuery 插件。

怎么用bootstrap制作时间轴(timeline)

Bootstrap 本身不提供内置的 Timeline 组件，官方 CSS 和 JS 都没有 timeline 类或插件。想用 Bootstrap 快速实现时间轴，得靠自定义 HTML 结构 + Bootstrap 工具类（如 position-relative、border-start、ps-4 等）手动搭建，而不是调用某个现成函数。

用 Bootstrap 5.3+ 的边框工具类画垂直时间线

核心思路是：用一个父容器做「时间线主干」，每个时间点作为子项错位排列。Bootstrap 5.3 起支持 border-start，比老版本用伪元素更轻量可靠。

父容器加 position-relative 和 border-start border-2 border-primary，形成左侧竖线
每个时间项用 position-relative ms-4 ps-3 向右偏移，并用 bg-white p-3 rounded 做气泡卡片
时间标签放在卡片内顶部，用 text-muted small 控制样式
避免用 float 或绝对定位，否则响应式易崩；优先用 ms-*（margin-start）配合 RTL 支持

示例结构：

<div class="position-relative border-start border-2 border-primary">
  <div class="position-relative ms-4 ps-3 mb-4">
    <div class="text-muted small">2023-06-15</div>
    <div class="bg-white p-3 rounded">
<h5 class="mb-1">项目启动</h5>
<p class="mb-0">完成需求评审与技术选型</p>
</div>
  </div>
  <div class="position-relative ms-4 ps-3">
    <div class="text-muted small">2023-08-22</div>
    <div class="bg-white p-3 rounded">
<h5 class="mb-1">首版上线</h5>
<p class="mb-0">前端 Vite + Bootstrap 5.3 部署成功</p>
</div>
  </div>
</div>

解决时间点图标对齐错位问题

常见错误是图标（如）和文字基线不齐，导致整条线歪斜。不是加 align-middle 就能修好——它只对行内元素生效，而图标常被包在 div 里。

VPS Bootstrap

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

下载

把图标单独提一层，用 position-absolute top-0 start-0 translate-middle 定位到时间项左上角
父时间项需设 position-relative，否则 translate-middle 失效
图标容器宽度设为 1rem，避免影响文本流；别用 font-size: 0.5rem 直接缩放，会导致 translate-middle 计算偏移不准
如果用 SVG 替代 Icon Font，记得加 vertical-align: middle 属性

响应式断点下时间轴方向切换（横→竖）

移动端窄屏强行保持垂直时间轴会挤压内容。Bootstrap 的 d-{breakpoint}-* 类可以控制方向，但不能只靠显示/隐藏——要真正改变布局流。

默认用垂直布局（flex-column + border-start），适合 md 及以上
在 sm 下切为水平时间轴：用 d-flex flex-row overflow-x-auto 包裹，每个项设 min-width: 280px 防止折行
水平模式下禁用 border-start，改用 border-end 做分隔，最后一项加 border-0
注意：ps-4 在水平模式下要换成 pe-4，否则所有项都往右挤