首页 > 其他 > 详细

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

时间:2019-06-20 12:21:28      阅读:293      评论:0      收藏:0      [点我收藏+]

众所周知,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>

 

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

原文:https://www.cnblogs.com/wiggin-Z/p/11057676.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!