标签：el GUTTER ELEMENTUI OFFSET padding 栅格 gutter offset col

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份大小的位置

标签：el,GUTTER,ELEMENTUI,OFFSET,padding,栅格,gutter,offset,col
来源： https://www.cnblogs.com/webSnow/p/15730529.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。