bootstrap 动态横向时间轴_简洁的横向水平时间轴特效

这是一款基于Bootstrap网格系统的响应式横向水平时间轴特效。该水平时间轴特效采用bootstrap网格进行布局，然后通过css代码来进行美化，效果简洁时尚。

使用方法

在页面中引入bootstrap文件。

HTML结构

该水平时间轴的HTML结构如下：

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

read more

2011

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

read more

2012

......

然后通过下面的CSS代码来对水平时间轴进行美化。

.main-timeline{ position: relative; }

.main-timeline:before,

.main-timeline:after{

content: "";

display: block;

width: 100%;

clear: both;

}

.main-timeline:before{

content: "";

width: 100%;

height: 5px;

background: #fff;

margin: auto 0;

position: absolute;

top: 50%;

left: 0;

}

.main-timeline .timeline{

width: 22%;

float: left;

margin-left: 3%;

position: relative;

}