柵格系統是Bootstrap 提供的一套響應式為不同設備提供的布局方式，它會隨著屏幕的尺寸改變而改變布局排列方式 比如bootstrap提供的四種媒體查詢: xs: 手機端，小于768px sm: 平板, >=768 md: 中等屏幕，桌面端, >=992 lg: 大屏，桌面端, >=1200 > 下面是官方答案 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列，在不同的 ~~~css /* 超小屏幕（手機，小于 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } ~~~