elementui布局上下居中-elementUI布局，响应式布局实现一行5列或7列布局

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

elementui 一行5列布局

原理：elementUI上有一个Layout布局，只能分成24的倍数。就像span="6"的布局一样（如下图）。

我们在开发的时候，有时需要5、7的布局，这时候只需要修改span值，自己创建一个类名，直接使用即可。

span的值可以随意选择，但尽量不要取elementui自带的值elementui布局上下居中，比如3、4、6、8、24等可以均分的值。

<el-col :span="25">
....
</el-col>

/*css中给值（5列，每列宽为25%）*/
.el-col-25 {
  width: 20%;
}

效果如下：

2.响应性简单，直接设置一个即可

html:

<el-col :lg="{span:'4-8'}">
....

班级风格：

.el-col-lg-4-8 {
  width: 20%;
}

3.响应式布局（完整版）

HTML设置：（5列等于24 / 5 = 4.8elementui布局上下居中，所以定义为4-8以便于记忆）

<el-col :lg="{span:'4-8'}":md="8":sm="12":xs="24">
....
</el-col>

不同屏幕长度类别的样式设置：

@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%;
}
}