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