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 版權協議，轉載請附上原文出處鏈接和本聲明。