bootstrap-wizard自定义简单向导样式

.display-flex{
	display: flex;
}
.border-right{
	border-color: #e8ecec;
}
.step-tag-down {
	min-width: 25px;
	position : relative;
	bottom: 5px;
}
.step-head {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	line-height: 38px;
	text-align: center;
	vertical-align: top;
	color: #626E82;
	border: 3px solid #00A5A8;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	margin-top: 20px;
	position: inherit;
	z-index: 999;
	cursor: pointer;
}
.icon-place{
	width: 28px;
	height: 28px;
	margin-top: 12px !important;
}
.step-line-left {
	position: absolute;
	top: 58px;
	height: 5px;
	left: 59%;
	right: 0;
	display: inline-block;
	background-color: #00A5A8;
}
.step-line-right {
	position: absolute;
	top: 58px;
	height: 5px;
	left: 0;
	right: 59%;
	display: inline-block;
	background-color: #00A5A8;
}

.row
    .col-xl-12.col-md-12.col-xs-12
      .card
        .card-header.pb-0
          h4.card-title
        .card-body.card-block
          .row
            .col-xl-8.border-right
              .text-align-center.display-flex
                .col-xl.text-xs-center.full-width
                  .step-main
                    h6
                      | 开始1
                  .step-head
                    i.fa.fa-briefcase.icon-place.font-medium-2
                    span.tag.tag-primary.step-tag-down.small 100
                  .step-line-left
                  .step-main.mt-3
                    div.text-align-center
                      h5 GCI: #{utility.abbrAmount(99,"$")}
                      h5 VOL: #{utility.abbrAmount(99,"$")}
                .col-xl.text-xs-center.full-width
                  .step-main
                    h6
                      | 开始2
                  .step-head
                    i.fa.fa-hourglass-half.icon-place.font-medium-2
                    span.tag.tag-primary.step-tag-down.small 100
                  .step-line-left
                  .step-line-right
                  .step-main.mt-3
                    div.text-align-center
                      h5 GCI: #{utility.abbrAmount(99,"$")}
                      h5 VOL: #{utility.abbrAmount(99,"$")}
                .col-xl.text-xs-center.full-width
                  .step-main
                    h6
                      | 开始3
                  .step-head
                    i.fa.fa-download.icon-place.font-medium-2
                    span.tag.tag-primary.step-tag-down.small 100
                  .step-line-left
                  .step-line-right
                  .step-main.mt-3
                    div.text-align-center
                      h5 GCI: #{utility.abbrAmount(99,"$")}
                      h5 VOL: #{utility.abbrAmount(99,"$")}
                .col-xl.text-xs-center.full-width
                  .step-main
                    h6
                      | 开始4
                  .step-head
                    i.fa.fa-flag-checkered.icon-place.font-medium-2
                    span.tag.tag-primary.step-tag-down.small 100
                  .step-line-right
                  .step-main.mt-3
                    div.text-align-center
                      h5 GCI: #{utility.abbrAmount(99,"$")}
                      h5 VOL: #{utility.abbrAmount(99,"$")}

本页面是jade页面写的代码，需要html的朋友可以转化一下，转化链接HTML转JADE