栅格系统实现五等分

306 阅读1分钟

栅格系统等分:

2等分,col-md-6 

3等分,col-md-4

4等分,col-md-3

6等分,col-md-2

如果我们需要除了以上几种外的等分,可以通过写css实现,以下以五等分为例子:

<style type="text/css”>
     /* 五等分 */ 
    .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 {
        position: relative;
        min-height: 1px; 
        padding-right: 10px;
        padding-left: 10px;
     } 
    
    .col-xs-1-5 {
        width: 20%; 
        float: left;
    } 
    
    @media (min-width: 768px) { 
        .col-sm-1-5 { 
            width: 20%; 
            float: left;
        }
    }
            
    @media (min-width: 992px) { 
        .col-md-1-5 {
            width: 20%; 
            float: left;
        }
    }
    
    @media (min-width: 1200px) { 
        .col-lg-1-5 { 
            width: 20%;
            float: left;
        } 
    }
</style>

来源链接:www.zhihu.com/question/29…