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文件是定义了每一个情况栅格所占的大小以及布局的

也就是说，我们只需要对col的样式进行复写，就OK了。

首先，设置col的span

    <a-row :gutter="15">
      <a-col :span="5">
        <a-form-item class="ant-form-item-col-5" label="第一列" has-feedback>
          <a-select
            show-search
            v-decorator="[
              't',
              {rules: [{required: true, message: ''}]}
            ]"
            placeholder=""
          ></a-select>
        </a-form-item>
      </a-col>

随后，在style标签里，重写col的宽度即可

<style>
.ant-col-5 {
  width: 20%;
}
</style>