6-1 斷點

一、什麼是斷點？

1. 先來聽一首歌....就會明白？
   
2. 還是不明白吧！（廢話）所謂斷點，在這裡指的是當螢幕尺寸符合斷點範圍時，才會根據斷點設定來實施網格系統（例如左邊9欄，右邊3欄），若是不符合斷點範圍，則自動調整為一欄式（通常是在手機瀏覽的情況下）。
3. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/overview/#%E9%9F%BF%E6%87%89%E5%BC%8F%E6%96%B7%E9%BB%9E

二、BootStrap4 的斷點

sm >= 576 px

md >= 768 px

lg >= 992 px

xl >= 1200 px

1. 如果寫：.col-sm-3，意思就是當螢幕 >= 576px 時，就會將此區域的寬度設為螢幕的 3/12。
2. 若同時寫：col-sm-4 col-md-3。意思就是當螢幕 >= 768 px時，就會將此區域的寬度設為螢幕的 3/12，若螢幕 < 768 但 >= 576px 時，就會將此區域的寬度設為螢幕的 4/12。