/*把网页分成12个栅格   做布局时指定每一块内容在不同的分辨率下所占的栅格数 就可以完成响应式布局的效果*/
*{
    margin:0;
    padding:0;

    box-sizing:border-box;
}
.container{
    height:auto;
    margin:0 auto;
}
.container-fluid{
    width:100%;
}
.container:after,.container-fluid:after{
    content:"";
    display:block;
    clear: both;
}
.container>.row{
    width:100%;height:100%;
}
 .container{
      width:100%;
    }
    .container>.row>.cols-xs-1,.container-fluid>.row>.cols-xs-1{
        width:8.333333%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-2,.container-fluid>.row>.cols-xs-2{
        width:16.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-3,.container-fluid>.row>.cols-xs-3{
        width:25%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-4,.container-fluid>.row>.cols-xs-4{
        width:33.333333%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-5,.container-fluid>.row>.cols-xs-5{
        width:41.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-6,.container-fluid>.row>.cols-xs-6{
        width:50%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-7,.container-fluid>.row>.cols-xs-7{
        width:58.3333%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-8,.container-fluid>.row>.cols-xs-8{
        width:66.666667%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-9,.container-fluid>.row>.cols-xs-9{
        width:75%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-10,.container-fluid>.row>.cols-xs-10{
        width:83.33333%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-11,.container-fluid>.row>.cols-xs-11{
        width:91.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-12,.container-fluid>.row>.cols-xs-12{
        width:100%;float:left;
        display:block;
    }
    .container>.row>.cols-xs-hid,.container-fluid>.row>.cols-xs-hid{
        display:none;
    }

@media screen and (min-width:720px){
    .container{
        width:742px;
    }
    .container>.row>.cols-sm-1,.container-fluid>.row>.cols-sm-1{
        width:8.333333%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-2,.container-fluid>.row>.cols-sm-2{
        width:16.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-3,.container-fluid>.row>.cols-sm-3{
        width:25%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-4,.container-fluid>.row>.cols-sm-4{
        width:33.333333%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-5,.container-fluid>.row>.cols-sm-5{
        width:41.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-6,.container-fluid>.row>.cols-sm-6{
        width:50%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-7,.container-fluid>.row>.cols-sm-7{
        width:58.3333%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-8,.container-fluid>.row>.cols-sm-8{
        width:66.666667%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-9,.container-fluid>.row>.cols-sm-9{
        width:75%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-10,.container-fluid>.row>.cols-sm-10{
        width:83.33333%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-11,.container-fluid>.row>.cols-sm-11{
        width:91.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-12,.container-fluid>.row>.cols-sm-12{
        width:100%;float:left;
        display:block;
    }
    .container>.row>.cols-sm-hid,.container-fluid>.row>.cols-sm-hid{
        display:none;
    }
}
@media screen and (min-width:950px){
    .container{
        width:966px;
    }
    .container>.row>.cols-md-1,.container-fluid>.row>.cols-md-1{
        width:8.333333%;float:left;
        display:block;
    }
    .container>.row>.cols-md-2,.container-fluid>.row>.cols-md-2{
        width:16.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-md-3,.container-fluid>.row>.cols-md-3{
        width:25%;float:left;
        display:block;
    }
    .container>.row>.cols-md-4,.container-fluid>.row>.cols-md-4{
        width:33.333333%;float:left;
        display:block;
    }
    .container>.row>.cols-md-5,.container-fluid>.row>.cols-md-5{
        width:41.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-md-6,.container-fluid>.row>.cols-md-6{
        width:50%;float:left;
        display:block;
    }
    .container>.row>.cols-md-7,.container-fluid>.row>.cols-md-7{
        width:58.3333%;float:left;
        display:block;
    }
    .container>.row>.cols-md-8,.container-fluid>.row>.cols-md-8{
        width:66.666667%;float:left;
        display:block;
    }
    .container>.row>.cols-md-9,.container-fluid>.row>.cols-md-9{
        width:75%;float:left;
        display:block;
    }
    .container>.row>.cols-md-10,.container-fluid>.row>.cols-md-10{
        width:83.33333%;float:left;
        display:block;
    }
    .container>.row>.cols-md-11,.container-fluid>.row>.cols-md-11{
        width:91.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-md-12,.container-fluid>.row>.cols-md-12{
        width:100%;float:left;
        display:block;
    }
    .container>.row>.cols-md-hid,.container-fluid>.row>.cols-md-hid{
        display:none;
    }
}
@media screen and (min-width:1135px){
    .container{
        width:1177px;
    }
    .container>.row>.cols-lg-1,.container-fluid>.row>.cols-lg-1{
        width:8.333333%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-2,.container-fluid>.row>.cols-lg-2{
        width:16.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-3,.container-fluid>.row>.cols-lg-3{
        width:25%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-4,.container-fluid>.row>.cols-lg-4{
        width:33.333333%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-5,.container-fluid>.row>.cols-lg-5{
        width:41.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-6,.container-fluid>.row>.cols-lg-6{
        width:50%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-7,.container-fluid>.row>.cols-lg-7{
        width:58.3333%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-8,.container-fluid>.row>.cols-lg-8{
        width:66.666667%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-9,.container-fluid>.row>.cols-lg-9{
        width:75%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-10,.container-fluid>.row>.cols-lg-10{
        width:83.33333%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-11,.container-fluid>.row>.cols-lg-11{
        width:91.66667%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-12,.container-fluid>.row>.cols-lg-12{
        width:100%;float:left;
        display:block;
    }
    .container>.row>.cols-lg-hid,.container-fluid>.row>.cols-lg-hid{
        display:none;
    }
}