[教學] Bootstrap4.x 網格與隱藏元素總整理，讓你無痛從Bootstrap3升級到Bootstrap4.x

　　Bootstrap至今還是相當受歡迎的RWD套件，除了簡易好上手外，再來就是內建了許多網頁的常用特效，以及網路資源也相當豐富，而Bootstrap4正式版，已經推出許久，但還是有不少朋友，習慣使用Bootstrap3，雖然Bootstrap3相當好用，但因為3.0是採用CSS2的浮動貼齊方式，因此當遇到區塊長短腳時，就會產生區塊堆疊異常，而造成版面跑版的狀況發生。

  為了解決這問題，Bootstrap4.x後，則是採用CSS3的flex的屬性，來解決堆疊跑版的問題，同時4.x也將網格前綴詞作了調整，甚至就連大家最常使用的隱藏元素也改變了，因此要如何快速的上手Bootstrap4.x的網格系統與隱藏元素，梅干就幫大家整理一下，讓各位可以無痛且快速的進入Bootrap4.x。

---

Bootstrap4.x (container容器)首先，先來看一下container容器的部分，到了4.x後除了先前的container與container-fluid，現在還多了container-裝置，如此一下來就可控制最外層div容器的顯示寬度。

---

Bootstrap4.x (網格系統)至於Bootstrap4.x，原來的前綴詞到了xs作了調整，只需直接寫col即可，甚至container的區塊大小，也作了修正，原來的xl為1170，4.x變成了1140，因此在設計版型時，得特別注意到。

---

Bootstrap4.x (hidden/visible隱藏/顯示元素)最後隱藏元素，也是在Bootstrap3最常使用的，而到了Bootstrap4.x後，在官方的說明文件中，似乎找不到這張表，而此表是由熱心的網友「POY CHANG」所設計的，透過這張表，就可快速的了解，隱藏與顯示元素，該如何來作設定，而透過這三張表格，就能快速且無痛的使用Bootstrap4.x囉！