el-col一行放5个

哎嘿嘿.png

公司需求：从一行4个改为一行5个
我：？？？？

初始代码如下：
自适应宽度的，用的栅格，所以改成5个，原本elementui是不支持的

<el-row :gutter="40" class="panel-group">
        <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
            <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                <div class="card-panel-icon-wrapper icon-people">
                    <svg-icon icon-class="peoples" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                    <div class="card-panel-text">
                        访客
                    </div>
                    <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
                </div>
            </div>
        </el-col>
        ........

如何修改：

修改:lg="{span: '24-5'}"，这样在css中可以看到是  el-col-lg-24-5
直接:lg="'24-5'"是不行的，因为不支持字符串只支持数字。所以如果你写成:lg="24.5"也可以，但是可读性差

样式也要修改，注意先后顺序：
//分成5份怎么分
@media (min-width: 992px) {
    .el-col-lg-24-5 {
        width: 33.3%;
    }
}
@media  (min-width: 1350px) {
    .el-col-lg-24-5 {
        width: 20%;
    }
}

PS1:@media screen and (min-width: 992px) 这里省略了screen and，只有打印的时候有区别。
PS2：注意先后顺序，我偷懒没有写全@mediaonlyscreenand (max-width: 992px) and (max-width: 1350px)