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 {
     20%;
    float: left;
}
.col-xs-4-5 {
     80%;
    float: left;
}
@media (min- 768px) {
    .col-sm-1-5 {
         20%;
        float: left;
    }
}
@media (min- 768px) {
    .col-sm-4-5 {
         80%;
        float: left;
    }
}
@media (min- 992px) {
    .col-md-1-5 {
         20%;
        float: left;
    }
}
@media (min- 992px) {
    .col-md-4-5 {
         80%;
        float: left;
    }
}
@media (min- 1200px) {
    .col-lg-1-5 {
         20%;
        float: left;
    }
}
@media (min- 1200px) {
    .col-lg-4-5 {
        80%;
        float: left;
    }
}
/*5等分媒体查询样式end*/

  

 
 
原文地址:https://www.cnblogs.com/zwhbk/p/6148098.html