element-ui 并没有实现5列布局,其实自己实现也超级容易
24/5=4.8,每列点4.8格,所以干脆用 el-col-sm-4-8,el-col-md-4-8,el-col-lg-4-8,el-col-xl-4-8 命名,直接如下代码添加5列样式,
直接如下图使用
效果如下
@media only screen and (min-width:768px) {
.el-col-sm-4-8 {
width: 20%
}
.el-col-sm-offset-4-8 {
margin-left: 20%
}
.el-col-sm-pull-4-8 {
position: relative;
right: 20%
}
.el-col-sm-push-4-8 {
position: relative;
left: 20%
}
}
@media only screen and (min-width:992px) {
.el-col-md-4-8 {
width: 20%
}
.el-col-md-offset-4-8 {
margin-left: 20%
}
.el-col-md-pull-4-8 {
position: relative;
right: 20%
}
.el-col-md-push-4-8 {
position: relative;
left: 20%
}
}
@media only screen and (min-width:1200px) {
.el-col-lg-4-8 {
width: 20%
}
.el-col-lg-offset-4-8 {
margin-left: 20%
}
.el-col-lg-pull-4-8 {
position: relative;
right: 20%
}
.el-col-lg-push-4-8 {
position: relative;
left: 20%
}
}
@media only screen and (min-width:1920px) {
.el-col-xl-4-8 {
width: 20%
}
.el-col-xl-offset-4-8 {
margin-left: 20%
}
.el-col-xl-pull-4-8 {
position: relative;
right: 20%
}
.el-col-xl-push-4-8 {
position: relative;
left: 20%
}
}