关于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>

 

posted @ 2019-06-20 11:23  wiggin  阅读(1640)  评论(0编辑  收藏  举报