bootstrap简单两句css代码写一个超酷的响应式时间轴

最新推荐文章于 2024-08-08 07:45:19 发布

「已注销」

最新推荐文章于 2024-08-08 07:45:19 发布

阅读量1.3k

点赞数 2

https://github.com/gztrljh

本文链接：https://blog.csdn.net/ljh101/article/details/112433668

版权

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

摘要由CSDN通过智能技术生成

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

效果
在这里插入图片描述

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

依赖：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