/* @cols 12 [把每一个容器等比的分成12份] */
/* 需要响应的屏幕大小 */
/* @num1 768px
@num2 992px
@num3 1200px
固定的布局方式
.container-fluid(100%宽度 外大盒子)
.container(固定宽度，相对于内宽)
.row(行)
.col-(子元素) */
.container-fluid{
	display: block;/* 防止行元素 */
	width:100%;
	margin: auto;
}
.container{
	padding: 0 15px;
	margin: auto;
}
.row{
	width: 100%;
	margin: 0 -15px;

}
/* 解决子元素浮动带来的影响 *//* 撑不开父类 */
.row:after{
	content: "";
	display: inline-block;
	height: 0px;
	width: 100%;
	line-height: 0px;
	clear: both;
}
/* 属性选择器 *//* class涉及clo的都选中，最前面加div就是div下的 */
[class*='clo-']{
	float: left;
	padding: 0 15px;


}
/* 最小屏 */
@media screen  and (max-width:768px){
	.container{
		width: auto;
    }
	.col-xs-1{
		width: 8.333333%;
	}
	.col-xs-2{
		width: 16.666667%;
	}
	.col-xs-3{
		width: 25%;
	}
	.col-xs-4{
		width:33.333333%;
	}
	.col-xs-5{
		width:41.666667%;
	}
	.col-xs-6{
		width:50%;
	}

	.col-xs-7{
		width:58.333333%;
	}
	.col-xs-8{
		width:66.666667%;
	}
	.col-xs-9{
		width:75%;
	}

	.col-xs-10{
		width:83.333333%;
	}
	.col-xs-11{
		width:91.666667%;
	}
	.col-xs-12{
		width:100%;
	}
}

@media screen  and (min-width:768px) and (max-width:992px){
	.container{
		width: 750px;
	}


	.col-sm-1{
		width: 8.333333%;
	}
	.col-sm-2{
		width: 16.666667%;
	}
	.col-sm-3{
		width: 25%;
	}
	.col-sm-4{
		width:33.333333%;
	}
	.col-sm-5{
		width:41.666667%;/* 第二小块 */
	}
    .col-sm-6{
		width:50%;
	}
	.col-sm-7{
		width:58.333333%;/* 第二小块 */
	}
	.col-sm-8{
		width:66.666667%;/* 第二小块 */
	}
	.col-sm-9{
		width:75%;/* 第二小块 */
	}

	.col-sm-10{
		width:83.333333%;/* 第二小块 */
	}
	.col-sm-11{
		width:91.666667%;/* 第二小块 */
	}
	.col-sm-12{
		width:100%;/* 第二小块 */
	}	

}


@media screen  and (min-width:992px){
	.container{
		width: 970px;
	}


	.col-md-1{
		width: 8.333333%;/* 第一小块 */
	}
	.col-md-2{
		width: 16.666667%;/* 第二小块 */
	}
	.col-md-3{
		width: 25%;/* 第二小块 */
	}
	.col-md-4{
		width:33.333333%;/* 第二小块 */
	}
	.col-md-5{
		width:41.666667%;/* 第二小块 */
	}
     .col-md-6{
		width:50%;
	}
	.col-md-7{
		width:58.333333%;/* 第二小块 */
	}
	.col-md-8{
		width:66.666667%;/* 第二小块 */
	}
	.col-md-9{
		width:75%;/* 第二小块 */
	}

	.col-md-10{
		width:83.333333%;/* 第二小块 */
	}
	.col-md-11{
		width:91.666667%;/* 第二小块 */
	}
	.col-md-12{
		width:100%;/* 第二小块 */
	}	

}
@media screen  and (min-width:1200px){
	.container{
		width: 1170px;
	}


	.col-lg-1{
		width: 8.333333%;/* 第一小块 */
	}
	.col-lg-2{
		width: 16.666667%;/* 第二小块 */
	}
	.col-lg-3{
		width: 25%;/* 第二小块 */
	}
	.col-lg-4{
		width:33.333333%;/* 第二小块 */
	}
	.col-lg-5{
		width:41.666667%;/* 第二小块 */
	}
    .col-lg-6{
		width:50%;
	}
	.col-lg-7{
		width:58.333333%;/* 第二小块 */
	}
	.col-lg-8{
		width:66.666667%;/* 第二小块 */
	}
	.col-lg-9{
		width:75%;/* 第二小块 */
	}

	.col-lg-10{
		width:83.333333%;/* 第二小块 */
	}
	.col-lg-11{
		width:91.666667%;/* 第二小块 */
	}
	.col-lg-12{
		width:100%;/* 第二小块 */
	}	

}