bootstrap如何自定义5等分

根据bootstrap源码改的1比5的栅格系统

/*5等分媒体查询样式begin*/
.col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5,.col-xs-4-5,.col-sm-4-5,.col-md-4-5,.col-lg-4-5 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
.col-xs-1-5 {
    width: 20%;
    float: left;
}
.col-xs-4-5 {
    width: 80%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 768px) {
    .col-sm-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-4-5 {
       width: 80%;
        float: left;
    }
}
/*5等分媒体查询样式end*/

  

 

 
 
posted @ 2016-12-09 08:51  五环  阅读(747)  评论(0编辑  收藏  举报