这是一款简单的响应式垂直时间轴效果。该垂直时间轴效果使用bootstrap网格进行布局,在小屏幕设备上会将所有的时间节点占满整行垂直排列。
使用方法
在页面中引入bootstrap.min.css文件。
HTML结构
该响应式垂直时间轴的基本HTML结构如下:
10th
Apr
2017
Web Design
......
......
CSS样式
为该该响应式垂直时间轴添加下面的CSS样式。
.main-timeline{
width: 80%;
margin: 20px auto;
position: relative;
}
.main-timeline:before{
content: "";
display: block;
width: 2px;
height: 1