Bootstrap 網格層（斷點）

除了列單元的概念之外，Bootstrap 還有不同的斷點或網格大小，稱為層。Bootstrap 3 網格有四（4）層，以適應不同的螢幕（或視口）寬度。Bootstrap 3 層是 xs，sm，md 和 lg。Bootstrap 的網格列由不同的 col-{breakpoint}-{units} CSS 類標識。

每個網格層都包含一個範圍，旨在最佳地適應典型的裝置螢幕寬度，如桌上型電腦，膝上型電腦，平板電腦和智慧手機。

Bootstrap 使用 CSS 媒體查詢來建立響應斷點，為每個網格大小建立邊界。這些網格大小使你可以更改列的佈局，以最佳匹配不同的螢幕寬度和裝置_響應式設計的本質。

• col-xs-* - 用於智慧手機的最小螢幕寬度<768 畫素
• col-sm-* - 適用於智慧手機和平板電腦的小螢幕寬度> = 768 畫素
• col-md-* - 適用於平板電腦和膝上型電腦的中等螢幕寬度> = 992 畫素
• col-lg-* - 適用於大型螢幕寬度，如桌面> = 1200 畫素

參考： 網格系統

每個裝置的列寬相同

要建立始終為視口寬度 50％ 的列 （在所有裝置上），你可以為每個層設定 col-*-6 ..

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

然而，這是不必要的額外標記，因為 col-xs-6 意味著 xs 及以上的 6 個單位。你設定的最小層（xs，sm 或 md）也定義了較大螢幕寬度的大小。對於所有層上的相同大小的列，只需設定最小視口的寬度。

更短的程式碼：

<div class="col-xs-6">..</div>

每個裝置的不同列寬（響應式設計）

可以組合 col-*-*類來控制不同網格大小的列寬。

例如，在 sm 層建立一個 50％ 寬度的列，在 md 層建立一個 25％ 寬度的列…

<div class="col-md-3 col-sm-6">..</div>

sm，md 和 lg 網格將在視口寬度小於 768 畫素時垂直堆疊。這是 xs 網格適合的位置。使用 col-xs- *類的列不會垂直堆疊，並且會在最小的螢幕上繼續縮小。