之前在學這塊時候比較模糊 有點不熟 以至于在后來的開發過程中看別人的代碼中的xs sm等 以及{span：8}也表示困惑

但也不敢問大佬（怕因為太簡單而被嘲諷），只能自己去百度去了解，總算是有些眉目，到現在覺得可能有些小伙伴和我當初一樣比較困惑，希望這個能對和我一樣模糊的小伙伴有幫助，也方便自己隨時查看

labelCol：表示當前label在整行的占比，就是下圖紅色框框部分

wrapperCol：表示當前輸入框在整行的占比 就是下圖黃色框框部分

1.首先就是對xs sm等的解釋 ，這相當于響應式布局一樣 當分辨率小于多少就應用該對象，大部分情況下只需要使用xs和sm即可? ，特殊需要再加上其他分辨率，相當于移動端和PC端。

注意！！！總共是24份? span后面數字是幾就是幾份? 不存在約分 6：18 不等于 1：3??

而且！！labelCol和wrapperCol是成套使用的，在相同分辨率下兩者的內容是對應的

舉個例子

const formItemLayout = {
  //這是label的占比份數，span表示份
  labelCol: {
    xs: { span: 24 }, //這個就是當前分辨率小于576px時候運用的比例
    sm: { span: 8 }   //這個就是當前分辨率大于576px時候運用的比例
  },
  //這個是輸入框的占比份數
  wrapperCol: {
    xs: { span: 24 }, //這個就是當前分辨率小于576px時候運用的比例
    sm: { span: 16 }  //這個就是當前分辨率大于576px時候運用的比例
  }
};

除了span 還有offset? 他就是偏移量? 是當前組件相對一行的頭所偏移的距離，也就是如果當offset為4，那么整體就往右偏移了四份，代碼例子代碼例子

除了前兩個span和offset屬性外 還有一個 gutter，他就是row元素的間隙，比如gutter是20 則代表在他們中間的間隙為20，也就是綠色箭頭所指的區域

const formItemLayout = {
  labelCol: {
    sm: { span: 6 ，offset：4 }   //偏移4份
  },
  wrapperCol: {
    sm: { span: 12 }  //相較于前個例子 span變為了12份，因為總份數是24份
  }
};

最后，希望能幫助到對這塊和我曾經一樣比較模糊的小伙伴

總結