Bootstrap制作时间线布局 Bootstrap如何实现Timeline样式-Bootstrap教程-PHP中文网

Bootstrap 5 官方不提供 timeline 组件，需用 flex-column + position-relative + 自定义 CSS 实现；推荐 border-start 方案替代伪元素，响应式需结合 d-{breakpoint}-* 类控制布局方向与间距。

Bootstrap 5 里没有内置 `timeline` 组件

别翻文档了，timeline 不是 bootstrap 官方组件，无论 v4 还是 v5 都没提供。你看到的所谓“bootstrap 时间线”，全是社区 diy 的 css 布局方案——靠 flex、position 和语义化结构硬凑出来的。

这意味着：没 data-bs-toggle="timeline" 这种东西，也没 Timeline 类名可直接用；你得自己搭骨架，再套 Bootstrap 的间距、颜色、断点类。

别在 node_modules/bootstrap/scss/ 里找 _timeline.scss，它不存在
别指望 npm install bootstrap-timeline 能和官方 CSS 无缝兼容（多数已停更或仅支持 v3）
如果项目用的是 Bootstrap 5.3+，注意 float 已被移除，老教程里靠 float-left 拉时间轴的写法会失效

用 `flex-column` + `position-relative` 搭基础时间轴结构

最稳的路子是放弃“复用现成组件”的幻想，用 Bootstrap 自带的 flex 工具类 + 少量自定义 CSS 控制主轴对齐和节点偏移。

核心思路：外层 flex-column 定方向，每个时间项用 position-relative，让圆点（::before）绝对定位到左侧，内容区域靠 ms-4（Bootstrap 5 的 margin 左侧缩进）错开。

<div class="d-flex flex-column">
  <div class="position-relative ms-4 pb-4">
    <div class="position-absolute bg-primary rounded-circle" style="width: 16px; height: 16px; left: -28px; top: 8px;"></div>
    <h6 class="fw-bold">2023-05-12</h6>
    <p class="mb-0">完成用户权限模块重构</p>
  </div>
  <div class="position-relative ms-4 pb-4">
    <div class="position-absolute bg-secondary rounded-circle" style="width: 16px; height: 16px; left: -28px; top: 8px;"></div>
    <h6 class="fw-bold">2023-03-07</h6>
    <p class="mb-0">上线新登录流程</p>
  </div>
</div>

圆点位置用 left: -28px 是为了避开 ms-4（即 1.5rem）的缩进，同时留出视觉余量
所有 position-absolute 元素必须包裹在 position-relative 父容器里，否则会相对于 body 定位
别用 mt-* 分隔条目——flex 布局下垂直间距统一用 pb-4（底部 padding）更可控

响应式断点下时间轴要重排方向

手机屏上左右排列的时间轴会挤成一团，必须在小屏切为「上下堆叠」，但很多人只加 d-md-flex 却忘了重置圆点定位逻辑。

VPS Bootstrap

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

下载

关键不是“隐藏左边圆点”，而是让小屏时圆点回到内容左侧、不悬空，且时间文字左对齐——否则会出现圆点飘在行首上方、文字缩进错乱的问题。

给外层加 d-flex flex-md-row，在 md 及以上才横排
小屏时删掉 position-absolute 和 left 偏移，改用 text-start 对齐标题
圆点改用 me-3（右侧 margin）紧贴文字，而不是靠绝对定位硬拉
别依赖媒体查询手写 CSS，优先用 Bootstrap 的 d-{breakpoint}-* 和 ms-{breakpoint}-* 类控制显隐和间距

用 `border-start` 替代伪元素画时间线（更轻量）

如果你只需要一条竖线贯穿，不用圆点或图标，border-start 是最省事的选择——它比 ::before 更少触发重排，也不用算像素偏移。

配合 ps-4（padding-start）把内容往右推，整条线就自然成了时间轴主干。

<div class="border-start border-secondary ps-4">
  <div class="mb-4">
    <h6 class="fw-bold">2023-05-12</h6>
    <p class="mb-0">完成用户权限模块重构</p>
  </div>
  <div class="mb-4">
    <h6 class="fw-bold">2023-03-07</h6>
    <p class="mb-0">上线新登录流程</p>
  </div>
</div>

border-start 在 RTL（从右向左）布局下会自动变成 border-end，比固定写 border-left 更健壮
竖线粗细用 border-start-width（如 border-start-width-2）控制，颜色用 border-start-{color}
如果某一项需要高亮（比如当前步骤），直接加 border-start-primary，无需额外样式