.container{                  /* 固定宽度 */  /* 写在第二个盒子 */
  	height: auto;
  	overflow: hidden;
  	margin-left: auto;
  	margin-right: auto;
  	padding-left: 15px;
  	padding-right: 15px;
  	box-sizing: border-box;
}
.container-fluid{           /*  不固定宽度 */  /*  写在第一个盒子 */
   height: auto;
   overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.row{
   height: auto;
   overflow: hidden;
 /* margin-left: -15px; */
	/* margin-right: -15px; */
	box-sizing: border-box;
}
/* 清除浮动的bug */
.row::before, .row::after{
  	content: "";
  	display: block;
  	width: 0;
  	height: 0;
  	line-height: 0;
  	clear: both;
}
[class*="col-"]{
  	float: left;
  	padding-left: 15px;
  	padding-right: 15px;
  	box-sizing: border-box;
}
/* 手机端 <768 没有固定宽度col-xs- */
@media screen and (max-width: 768px){
	/* 每个屏幕有12列，当屏幕有一列的时候，每一个子元素占比100% /（12/1） */
	/* 每个屏幕有12列，当屏幕有二列的时候，占比100% /（12/2）*/
   .col-xs-1{
   	width: 8.333333%;
   }
   .col-xs-2{
   	width: 16.666666%;
   }.col-xs-3{
   	width: 25%;
   }.col-xs-4{
   	width: 33.333333%;
   }.col-xs-5{
   	width: 41.666666%;
   }.col-xs-6{
   	width: 50%;
   }.col-xs-7{
   	width: 58.333333%;
   }.col-xs-8{
   	width: 66.666666%;
   }.col-xs-9{
   	width: 75%;
   }.col-xs-10{
   	width: 83.333333%;
   }.col-xs-11{
   	width: 91.666666%;
   }.col-xs-12{
   	width: 100%;
   }
   /* 隐藏某个子元素 */
   .hidden-xs{
    display: none;
   }
   
   /* push */
   .col-xs-push-1{
      position: relative;
      left: 8.333333%;
   }
   .col-xs-push-2{
      position: relative;
      left: 16.666666%;
   }
   .col-xs-push-3{
      position: relative;
      left: 25%;
   }
   .col-xs-push-4{
      position: relative;
      left: 33.333333%;
   }
   .col-xs-push-5{
      position: relative;
      left: 41.666666%;
   }
   .col-xs-push-6{
      position: relative;
      left: 50%;
   }
   .col-xs-push-7{
      position: relative;
      left: 58.333333%;
   }
   .col-xs-push-8{
      position: relative;
      left: 66.666666%;
   }
   .col-xs-push-9{
      position: relative;
      left: 75%;
   }
   .col-xs-push-10{
      position: relative;
      left: 83.333333%;
   }
   .col-xs-push-11{
      position: relative;
      left: 91.666666%;
   }
   .col-xs-push-12{
      position: relative;
      left: 100%;
   }
   /* pull */
   .col-xs-pull-1{
      position: relative;
      right: 8.333333%;
   }
   .col-xs-pull-2{
      position: relative;
      right: 16.666666%;
   }
   .col-xs-pull-3{
      position: relative;
      right: 25%;
   }
   .col-xs-pull-4{
      position: relative;
      right: 33.333333%;
   }
   .col-xs-pull-5{
      position: relative;
      right: 41.666666%;
   }
   .col-xs-pull-6{
      position: relative;
      right: 50%;
   }
   .col-xs-pull-7{
      position: relative;
      right: 58.333333%;
   }
   .col-xs-pull-8{
      position: relative;
      right: 66.666666%;
   }
   .col-xs-pull-9{
      position: relative;
      right: 75%;
   }
   .col-xs-pull-10{
      position: relative;
      right: 83.333333%;
   }
   .col-xs-pull-11{
      position: relative;
      right: 91.666666%;
   }
   .col-xs-pull-12{
      position: relative;
      right: 100%;
   }

}
/* 平板端 768~992 固定宽度是750px  col-sm- */
@media screen and (max-width: 992px) and (min-width: 768px){
    .container{
    	width:750px;
    }
    .col-sm-1{
   	width: 8.333333%;
   }
   .col-sm-2{
   	width: 16.666666%;
   }.col-sm-3{
   	width: 25%;
   }.col-sm-4{
   	width: 33.333333%;
   }.col-sm-5{
   	width: 41.666666%;
   }.col-sm-6{
   	width: 50%;
   }.col-sm-7{
   	width: 58.333333%;
   }.col-sm-8{
   	width: 66.666666%;
   }.col-sm-9{
   	width: 75%;
   }.col-sm-10{
   	width: 83.333333%;
   }.col-sm-11{
   	width: 91.666666%;
   }.col-sm-12{
   	width: 100%;
   }
   /* 隐藏某个子元素 */
   .hidden-sm{
    display: none;
   }
   /* push */
   .col-sm-push-1{
      position: relative;
      left: 8.333333%;
   }
   .col-sm-push-2{
      position: relative;
      left: 16.666666%;
   }
   .col-sm-push-3{
      position: relative;
      left: 25%;
   }
   .col-sm-push-4{
      position: relative;
      left: 33.333333%;
   }
   .col-sm-push-5{
      position: relative;
      left: 41.666666%;
   }
   .col-sm-push-6{
      position: relative;
      left: 50%;
   }
   .col-sm-push-7{
      position: relative;
      left: 58.333333%;
   }
   .col-sm-push-8{
      position: relative;
      left: 66.666666%;
   }
   .col-sm-push-9{
      position: relative;
      left: 75%;
   }
   .col-sm-push-10{
      position: relative;
      left: 83.333333%;
   }
   .col-sm-push-11{
      position: relative;
      left: 91.666666%;
   }
   .col-sm-push-12{
      position: relative;
      left: 100%;
   }
   /* pull */
   .col-sm-pull-1{
      position: relative;
      right: 8.333333%;
   }
   .col-sm-pull-2{
      position: relative;
      right: 16.666666%;
   }
   .col-sm-pull-3{
      position: relative;
      right: 25%;
   }
   .col-sm-pull-4{
      position: relative;
      right: 33.333333%;
   }
   .col-sm-pull-5{
      position: relative;
      right: 41.666666%;
   }
   .col-sm-pull-6{
      position: relative;
      right: 50%;
   }
   .col-sm-pull-7{
      position: relative;
      right: 58.333333%;
   }
   .col-sm-pull-8{
      position: relative;
      right: 66.666666%;
   }
   .col-sm-pull-9{
      position: relative;
      right: 75%;
   }
   .col-sm-pull-10{
      position: relative;
      right: 83.333333%;
   }
   .col-sm-pull-11{
      position: relative;
      right: 91.666666%;
   }
   .col-sm-pull-12{
      position: relative;
      right: 100%;
   }
}
/* pc小屏 992~1200 固定宽度 970px col-md- */
@media screen and (min-width: 992px) and (max-width: 1200px){
    .container{
    	width:970px;
    }
    .col-md-1{
   	width: 8.333333%;
   }
   .col-md-2{
   	width: 16.666666%;
   }.col-md-3{
   	width: 25%;
   }.col-md-4{
   	width: 33.333333%;
   }.col-md-5{
   	width: 41.666666%;
   }.col-md-6{
   	width: 50%;
   }.col-md-7{
   	width: 58.333333%;
   }.col-md-8{
   	width: 66.666666%;
   }.col-md-9{
   	width: 75%;
   }.col-md-10{
   	width: 83.333333%;
   }.col-md-11{
   	width: 91.666666%;
   }.col-md-12{
   	width: 100%;
   }
   /* 隐藏某个子元素 */
   .hidden-md{
    display: none;
   }
   /* push */
   .col-md-push-1{
      position: relative;
      left: 8.333333%;
   }
   .col-md-push-2{
      position: relative;
      left: 16.666666%;
   }
   .col-md-push-3{
      position: relative;
      left: 25%;
   }
   .col-md-push-4{
      position: relative;
      left: 33.333333%;
   }
   .col-md-push-5{
      position: relative;
      left: 41.666666%;
   }
   .col-md-push-6{
      position: relative;
      left: 50%;
   }
   .col-md-push-7{
      position: relative;
      left: 58.333333%;
   }
   .col-md-push-8{
      position: relative;
      left: 66.666666%;
   }
   .col-md-push-9{
      position: relative;
      left: 75%;
   }
   .col-md-push-10{
      position: relative;
      left: 83.333333%;
   }
   .col-md-push-11{
      position: relative;
      left: 91.666666%;
   }
   .col-md-push-12{
      position: relative;
      left: 100%;
   }
   /* pull */
   .col-md-pull-1{
      position: relative;
      right: 8.333333%;
   }
   .col-md-pull-2{
      position: relative;
      right: 16.666666%;
   }
   .col-md-pull-3{
      position: relative;
      right: 25%;
   }
   .col-md-pull-4{
      position: relative;
      right: 33.333333%;
   }
   .col-md-pull-5{
      position: relative;
      right: 41.666666%;
   }
   .col-md-pull-6{
      position: relative;
      right: 50%;
   }
   .col-md-pull-7{
      position: relative;
      right: 58.333333%;
   }
   .col-md-pull-8{
      position: relative;
      right: 66.666666%;
   }
   .col-md-pull-9{
      position: relative;
      right: 75%;
   }
   .col-md-pull-10{
      position: relative;
      right: 83.333333%;
   }
   .col-md-pull-11{
      position: relative;
      right: 91.666666%;
   }
   .col-md-pull-12{
      position: relative;
      right: 100%;
   }
}
/* pc大屏 >1200 固定宽度1170px col-lg- */
@media screen and (min-width: 1200px){
   .container{
    	width:1170px;
    }
    .col-lg-1{
   	width: 8.333333%;
   }
   .col-lg-2{
   	width: 16.666666%;
   }.col-lg-3{
   	width: 25%;
   }.col-lg-4{
   	width: 33.333333%;
   }.col-lg-5{
   	width: 41.666666%;
   }.col-lg-6{
   	width: 50%;
   }.col-lg-7{
   	width: 58.333333%;
   }.col-lg-8{
   	width: 66.666666%;
   }.col-lg-9{
   	width: 75%;
   }.col-lg-10{
   	width: 83.333333%;
   }.col-lg-11{
   	width: 91.666666%;
   }.col-lg-12{
   	width: 100%;
   }
   .hidden-lg{               /* 隐藏 */
    display: none;
   }
   /* push */
   .col-lg-push-1{
      position: relative;
      left: 8.333333%;
   }
   .col-lg-push-2{
      position: relative;
      left: 16.666666%;
   }
   .col-lg-push-3{
      position: relative;
      left: 25%;
   }
   .col-lg-push-4{
      position: relative;
      left: 33.333333%;
   }
   .col-lg-push-5{
      position: relative;
      left: 41.666666%;
   }
   .col-lg-push-6{
      position: relative;
      left: 50%;
   }
   .col-lg-push-7{
      position: relative;
      left: 58.333333%;
   }
   .col-lg-push-8{
      position: relative;
      left: 66.666666%;
   }
   .col-lg-push-9{
      position: relative;
      left: 75%;
   }
   .col-lg-push-10{
      position: relative;
      left: 83.333333%;
   }
   .col-lg-push-11{
      position: relative;
      left: 91.666666%;
   }
   .col-lg-push-12{
      position: relative;
      left: 100%;
   }
   /* pull */
   .col-lg-pull-1{
      position: relative;
      right: 8.333333%;
   }
   .col-lg-pull-2{
      position: relative;
      right: 16.666666%;
   }
   .col-lg-pull-3{
      position: relative;
      right: 25%;
   }
   .col-lg-pull-4{
      position: relative;
      right: 33.333333%;
   }
   .col-lg-pull-5{
      position: relative;
      right: 41.666666%;
   }
   .col-lg-pull-6{
      position: relative;
      right: 50%;
   }
   .col-lg-pull-7{
      position: relative;
      right: 58.333333%;
   }
   .col-lg-pull-8{
      position: relative;
      right: 66.666666%;
   }
   .col-lg-pull-9{
      position: relative;
      right: 75%;
   }
   .col-lg-pull-10{
      position: relative;
      right: 83.333333%;
   }
   .col-lg-pull-11{
      position: relative;
      right: 91.666666%;
   }
   .col-lg-pull-12{
      position: relative;
      right: 100%;
   }
}