Ant design vue 对栅格系统进行5等分

Antd vue 使用的是24栅格系统,可以很轻松的将内容分为4,6,8份,但是,需求不会只局限于这几种分法,5等分,7等分比比皆是,那么怎么让Antd vue的栅格系统可以做到5等分呢。

下面图片为4等分容器(span=“6”)时的截图
在这里插入图片描述

下面图片为5等分容器 (span=“5”) 时的截图在这里插入图片描述

看一下Antd vue 是如何将栅格5等分的
打开Antd vue的源码中的 Grid下的index.css,可以看到其实这个css文件是定义了每一个情况栅格所占的大小以及布局的Ant design vue 对栅格系统进行5等分_第1张图片
也就是说,我们只需要对col的样式进行复写,就OK了。
首先,设置col的span
    
      
        
          
        
      
随后,在style标签里,重写col的宽度即可

你可能感兴趣的:(Ant,desigin,vue,Vue)