很多時候網頁排版都會用到四個一列、三個一列的樣子，例如下圖
那在BUDA我們該怎麼建立這樣的樣式呢？這時候就要請到 子元素 出場啦！像此圖就是使用 col(欄)-四欄- 建立，請往下看教學
BUDA的子元素有許多種，從一欄一列至十二欄一列都有，我們可以看 COL(欄)-x欄-子元素 來做判斷。
例如 COL(欄)-兩欄-子元素 ，就代表此子元素是兩欄一列，因為我們把一列分為12分，所以如果是col-md-6那就代表他佔了六份，兩個col-md-6就會有平均分配的兩個框
1.子元素建立時外面一定要有父元素，所以要使用子元素時請先建立一個父元素，並於 BUDA_W(父元素) 旁加上 row ，再到進階的樣式中輸入 margin:auto; 讓子元素正常顯示
2.幾欄一列就要在父元素內 空幾欄數量+1 ，例如兩欄一列子元素，就請在父元素內空兩格+1(第三個空格是為了方便編輯最外面父元素)
詳情參考：使子元素水平置中
3.空格完成後請回到第一個空格，並按下
選擇 COL(欄)-兩欄-子元素 ，新增完成後會發現多出了橘色框，請使用鍵盤右鍵讓文字游標到橘色外面(第二個空格)，再新增一次COL兩欄子元素，您就會發現父元素內有了兩個平均分配的橘色框(子元素)，所以有 幾欄子元素 就要新增幾次，例如 COL(欄)-六欄-子元素 就要新增六次，才會擁有平均分配的橘色框唷！
4.所以 col-md 給電腦版用，同理我們就可以再設置 col-sm(平版) 和 col-xs(手機)
我們下 col-sm-12 col-xs-12 看看電腦、平版、手機顯示會如何
後台樣子
前台樣子(電腦版)
因為我們是下col-md-6所以會被分成兩塊
前台樣子(平版)
平版是下col-sm-12所以會自己佔一列，分成上下兩塊
前台樣子(手機版)
手機版也是下col-xs-12所以會自己佔一列，分成上下兩塊
假如我現在電腦版有四塊都是col-md-3，平版不改都是col-sm-12，但我針對手機版給不同的sm，我們來看看會如何顯示
後台樣子
前台樣子(手機版)
您就可以看到每一塊都針對自己佔的份數顯示了
所以您可依照需求選擇電腦、手機、平板想要如何顯示，多樣變化，是不是超級棒的？
使用父元素包著子元素形成列與行的排列，詳情參考：使子元素水平置中
給予內容並在其內製作樣式排列，詳情參考：網頁區塊鏈同一頁製作不同內容
父元素介紹，詳情參考：DIV之父元素
#網頁區塊鏈 #區塊鏈 #網頁區塊 #網頁修改 #查修網頁 #文字 #背景 #顏色 #css #製作不同內容 #製作 #修改 #大螢幕 #小螢幕 #手機 #平板 #電腦 #css #語法 #BUDA #DIV #父元素 #子元素 #BUDA_W100 #col
規格詳情歡迎觀看光速人軟體規格表
