关于bootstrap栅格系统的五等分以及八等分代码

众所周知，bootstrap的栅格系统是基于十二等分的，今天拿到设计的设计稿一看，发现一个图片list上只有8张图片，然后上网查资料，发现只能自己写css代码实现，故写博客记录代码。

以下是八等分的代码

<style type="text/css">
.col-xs-1-8,
.col-sm-1-8,
.col-md-1-8,
.col-lg-1-8{
            position: relative;
            min-height: 1px;
            margin-right: 10px;
            margin-left: 10px;
}

.col-xs-1-8{
            width:12.5%;
            float:left;
}

@media (min-width:768px){
                .col-sm-1-8{
                            width: 12.5%;
                            float: left;
                }
}

@media (min-width:992px){
                .col-md-1-8{
                            width: 12.5%;
                            float: left;
                }
}

@media (min-width:1200px){
                .col-lg-1-8{
                            width: 12.5%;
                            float:left;
                }
}
</style>

5等分代码同理

<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;
    margin-right: 10px;
    margin-left: 10px;
 
}
 
.col-xs-1-5 {
    width: 18%;
    float: left;
}
 
@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 18%;
        float: left;
    }
}
 
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 18%;
        float: left;
    }
}
 
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 18%;
        float: left;
    }
}
</style>

 

转载于:https://www.cnblogs.com/wiggin-Z/p/11057676.html