Bootstrap栅格系统扩展 五格

Bootstrap栅格系统布局的魅力是毋容置疑的，但是再好的东西也会有不完美的地方，比如当布局上需要水平排列5列平分宽度时，bootstrap就显得比较尴尬了，这时候就需要老司机按照它的命名风格自定义一份与bootstrap相近的栅格扩展了。

col-*-1~12的坑位bootstrap全占了，定义成13感觉又有点对不上号，犹豫再三决定用2_5，因为它的宽度介于2~3之间。
新建bootstrap-expand.css文件，以下是CSS内容：

.col-xs-2_5,
.col-sm-2_5,
.col-md-2_5,
.col-lg-2_5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.col-xs-2_5 {
    float: left;
}

.col-xs-2_5 {
    width: 20%;
}

.col-xs-pull-2_5 {
    right: 20%;
}

.col-xs-push-2_5 {
    left: 20%;
}

.col-xs-offset-2_5 {
    margin-left: 20%;
}

@media (min-width: 768px) {
    .col-sm-2_5 {
        float: left;
    }
    .col-sm-2_5 {
        width: 20%;
    }
    .col-sm-pull-2_5 {
        right: 20%;
    }
    .col-sm-push-2_5 {
        left: 20%;
    }
    .col-sm-offset-2_5 {
        margin-left: 20%;
    }
}

@media (min-width: 992px) {
    .col-md-2_5 {
        float: left;
    }
    .col-md-2_5 {
        width: 20%;
    }
    .col-md-pull-2_5 {
        right: 20%;
    }
    .col-md-push-2_5 {
        left: 20%;
    }
    .col-md-offset-2_5 {
        margin-left: 20%;
    }
}

@media (min-width: 1200px) {
    .col-lg-2_5 {
        float: left;
    }
    .col-lg-2_5 {
        width: 20%;
    }
    .col-lg-pull-2_5 {
        right: 20%;
    }
    .col-lg-push-2_5 {
        left: 20%;
    }
    .col-lg-offset-2_5 {
        margin-left: 20%;
    }
}