關於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>