element中设置5栏布局

前言

这篇文章给小伙伴们说的是在使用element这个UI库的时候，它里面有Layout 布局，但是如果没有自己设置的话，它只能分为24的因数，就比如3、4、6这种布局，但是我们在开发的时候，还会碰到5或者7这样的布局，那么就很头痛了。我想很多小伙伴应该和我一样，输入4.8，但是这是没有用的，那么今天我来给大家站展示一下怎么解决5栏布局的问题

1、原理讲解

先随手写一个普通的4栏布局，进入控制台，大家会发现

然后就比较清晰了思路，我们会发现:span="6"，到控制台中的class就是el-col-6，那它的样式就是.el-col-6 { width: 25%; }，这就已经很明了了，我们只要自己创建一个class名字，然后在调用就可以了。

2、代码截图

这里我是新创建了一个25，因为它这个布局是按照24来分的，所以我就选择24以外的数字来进行命名，名字是可以随便起的，你只要别取那些自带的就可以，比如3、4、6、8这些数，也不是说不能取，你把区域的问题梳理好就可以随便起，我个人的习惯还是5栏就是25，7栏就是27，这样直接就在css初始化中就写好了，以后也不会想这个东西了，需要了就直接可以用，还是很方便的。
接下来我们看一下在浏览器上的最终展示

结语

这个东西虽然很简单，但是对于刚使用element的小伙伴肯定还是要花点时间去解决的，希望刷到我这篇文章的时候，可以认真的看一下，非常的使用，提高写代码的效率。
希望这篇文章可以对你有所帮助。