如何实现Bootstrap时间轴组件的横向布局？

在Bootstrap中，要实现时间轴组件的横向布局，你需要利用其栅格系统和CSS样式调整。以下是步骤：

1. **引入 Bootstrap 核心 CSS** 和时间轴插件（`bootstrap.min.css` 和 `bootstrap-timeline.js`）:

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

2. **创建时间轴容器** 并设置宽度为 100% 或自适应宽度，比如 `container-fluid` 类：

   <div class="container-fluid">
     <ul class="timeline">
       <!-- 时间线条目 -->
     </ul>
   </div>

3. **添加时间线项目（items）** 使用 `.timeline-item` 类，并通过调整 `.timeline-date` 和 `.timeline-content` 的宽度来改变布局方向。通常，`.timeline-date` 设置为固定的宽度，如 `col-sm-3` 或 `col-md-2`，而 `.timeline-content` 则设置为剩余的宽度：

   <li class="timeline-item">
     <div class="timeline-badge info">1</div>
     <div class="timeline-panel">
       <div class="timeline-heading">
         <h4 class="timeline-title">事件标题</h4>
         <p><small class="text-muted"><i class="fas fa-clock"></i> 日期</small></p>
       </div>
       <div class="timeline-body">
         <p>事件详细描述。</p>
       </div>
     </div>
   </li>

4. **使用响应式设计** 为了让时间线在不同设备上保持良好的显示效果，可以结合使用 Bootstrap 的网格系统，如 `.col-lg-*`、`.col-md-*` 等。