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

使用方法

在页面中引入bootstrap文件。

HTML结构

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

然后通过下面的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;

}

.main-timeline .timeline:before{

content: attr(data-heading);

display: inline-block;

font-size: 24px;

font-weight: bold;

color: #fff;

transform: rotate(-90deg);

position: absolute;

top: 30px;

left: -2px;

z-index: 2;

}

.main-timeline .timeline:after{

content: "";

width: 5px;

height: 60px;

border-left: 9px dotted #fff;

position: absolute;

top: 54%;

left: 71px;

}

.main-timeline .timeline-content{

padding: 15px 0 40px 50px;

margin-bottom: 80px;

border-radius: 15px;

border: 5px solid #fff;

text-align: left;

background: #f67420;

z-index: 1;

position: relative;

}

.main-timeline .timeline:nth-child(even) .timeline-content{ background: #43a6ba; }

.main-timeline .timeline-content:before{

content: "";

width: 40px;

height: 100%;

position: absolute;

top: 0;

left: 0;

background: #d66215;

border-radius: 10px 0 0 10px;

}

.main-timeline .timeline:nth-child(even) .timeline-content:before{ background: #1784ab; }

.main-timeline .timeline-content:after{

content: "";

width: 40px;

height: 40px;

background: #f67420;

border-bottom: 5px solid #fff;

border-right: 5px solid #fff;

position: absolute;

bottom: -23px;

left: 50px;

transform: rotate(45deg);

z-index: -1;

}

.main-timeline .timeline:nth-child(even) .timeline-content:after{ background: #43a6ba; }

.main-timeline .description{

font-size: 14px;

color: #fff;

}

.main-timeline .read-more{

display: inline-block;

padding-right: 15px;

font-size: 16px;

font-weight: bold;

color: #fff;

text-transform: capitalize;

position: relative;

}

.main-timeline .read-more:before{

content: "\f0da";

font-family: 'FontAwesome';

font-size: 24px;

position: absolute;

top: -6px;

right: 0;

}

.main-timeline .year{

display: inline-block;

width: 85px;

height: 85px;

line-height: 85px;

background: #f67420;

border-radius: 5px;

border: 5px solid #fff;

text-align: center;

margin-left: 34px;

transform: rotate(45deg);

position: relative;

}

.main-timeline .timeline:nth-child(even) .year{ background: #43a6ba; }

.main-timeline .year span{

display: block;

font-size: 20px;

font-weight: bold;

color: #fff;

transform: rotate(-45deg);

}

.main-timeline .timeline.bottom{ margin: -7.7% 0 0 7%; }

.main-timeline .timeline.bottom:nth-child(5n+1),

.main-timeline .timeline.bottom:last-child{ margin-left: 3%; }

.main-timeline .timeline.bottom:before{

top: auto;

bottom: 110px;

}

.main-timeline .timeline.bottom:after{

top: auto;

left: auto;

bottom: 54%;

right: 71px;

border-color: #fff;

}

.main-timeline .timeline.bottom .timeline-content{

margin: 80px 0 0 0;

padding: 15px 0 40px 50px;

}

.main-timeline .timeline.bottom .timeline-content:after{

border: none;

border-top: 5px solid #fff;

border-left: 5px solid #fff;

bottom: auto;

top: -23px;

left: auto;

right: 50px;

}

.main-timeline .timeline.bottom .year{

top: 4px;

margin-left: 132px;

}

@media only screen and (max-width: 1199px){

.main-timeline:before{

width: 5px;

height: 100%;

top: 0;

left: 5%;

}

.main-timeline .timeline,

.main-timeline .timeline.bottom,

.main-timeline .timeline.bottom:nth-child(5n+1),

.main-timeline .timeline.bottom:last-child{

width: 85%;

float: none;

margin: 0 0 20px 15%;

}

.main-timeline .timeline:after,

.main-timeline .timeline.bottom:after{

width: 60px;

height: 5px;

top: 50px;

left: -58px;

border-top: 9px dotted #fff;

}

.main-timeline .timeline-content,

.main-timeline .timeline.bottom .timeline-content{ margin: 0; }

.main-timeline .year,

.main-timeline .timeline.bottom .year{

width: 65px;

height: 65px;

line-height: 60px;

margin: 0;

position: absolute;

top: 20px;

left: -15.5%;

z-index: 1;

}

.main-timeline .timeline .timeline-content:after{ display: none; }

.main-timeline .timeline.bottom:before{

bottom: auto;

top: 30px;

left: -2px;

}

}

@media only screen and (max-width: 990px){

.main-timeline .year,

.main-timeline .timeline.bottom .year{

left: -16.8%;

}

}

@media only screen and (max-width: 767px){

.main-timeline .timeline:after,

.main-timeline .timeline.bottom:after{ display: none; }

.main-timeline .year,

.main-timeline .timeline.bottom .year{

width: 30px;

height: 30px;

border: 3px solid #fff;

left: -13.5%;

}

.main-timeline .year span{ display: none; }

}

@media only screen and (max-width: 480px){

.main-timeline .year,

.main-timeline .timeline.bottom .year{ left: -15.5%; }

}