el-col一行放5个

2022-07-20  本文已影响0人  秀萝卜
哎嘿嘿.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)
上一篇下一篇

猜你喜欢

热点阅读