bootstrap简单两句css代码写一个超酷的响应式时间轴-优快云博客

本文介绍如何借助Bootstrap5的CSS，轻松实现一个既美观又响应式的通知时间轴效果，特别适合手机端展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的个人博客要弄一个通知的时间轴效果，网上找的很多是浮动布局的。响应式也不够

效果
在这里插入图片描述

手机端
在这里插入图片描述

依赖：bootstrap5

    <style>
        .app-line {
            position: relative;
        }

        .app-line:before {
            background-color: #e7e7e7;
            position: absolute;
            content: "";
            display: block;
            width: 2px;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            z-index: -1;
        }
    </style>

            <div class="pt-4">
                <div class="row">
                    <div class="col-md-2 d-flex justify-content-center align-items-center app-line">
                        <span class="badge rounded-pill bg-primary">2021年12月31</span>
                    </div>
                    <div class="col-md-10">
                        <div class="card rounded-0 border-0 shadow my-4">
                            <div class="card-body">
                                <h5 class="card-title">程序更新</h5>
                                <p class="card-text">Some quick example text to build on the card title and make u.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 d-flex justify-content-center align-items-center app-line">
                        <span class="badge rounded-pill bg-primary">2021年12月31</span>
                    </div>
                    <div class="col-md-10">
                        <div class="card rounded-0 border-0 shadow my-4">
                            <div class="card-body">
                                <h5 class="card-title">程序更新</h5>
                                <p class="card-text">Some quick example text to build on the card title and make u.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>