ELEMENTUI中GUTTER和OFFSET的区别

ELEMENTUI中GUTTER和OFFSET的区别

gutter是指栅格间间隔，offset是指栅格左侧的间隔格数

分栏间隔

el-row配置行，el-col配置列，像是一个个单行的表格

el-row上的属性gutter，默认值为0，可以设置大于0的任意数字

在PC端，设置的这个gutter值为该单元格左右的padding之和

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

 

上图代表的是"padding-left: 10px; padding-right: 10px;"

分栏偏移
el-col的offset属性，设置某个el-col元素左侧空多少份的位置，默认为0

如果其offset和span之和大于24，则该行剩余元素移到下一行，同时这个元素只显示一部分

<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>

• 1
• 2

中间会偏移原先6份大小的位置

 

版权声明：本文为weixin_43126568原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_43126568/article/details/107914613