Bootstrap 網格示例

下面我們收集了一些基本的 Bootstrap 網格佈局示例。

三個等寬列

以下示例顯示瞭如何獲取三個等寬的列，從平板電腦開始，一直擴充套件到大型桌面。在手機上，這些列將自動堆疊。

三個不等寬的列

以下示例顯示瞭如何獲取三個不同寬度的列，從平板電腦開始，一直擴充套件到大型桌面。

兩個不等寬列

以下示例顯示瞭如何獲取兩個不同寬度的列，從平板電腦開始，一直擴充套件到大型桌面。

無間隙

使用 .row-no-gutters 類來移除行及其列的間隙。

兩個帶兩個巢狀列的列

以下示例顯示瞭如何獲取兩個列，從平板電腦開始，一直擴充套件到大型桌面，並在較大的列內再包含兩個列（在手機上，這些列及其巢狀列將堆疊）。

混合：手機和桌面

Bootstrap 網格系統有四類：xs (手機)、sm (平板電腦)、md (桌面) 和 lg (大型桌面)。這些類可以組合以建立更動態和靈活的佈局。

提示：每個類都會向上擴充套件，因此如果您希望 xs 和 sm 的寬度相同，您只需指定 xs 即可。

混合：手機、平板電腦和桌面

清除浮動

在特定斷點處清除浮動（使用 .clearfix 類），以防止內容不均勻時出現奇怪的換行。

偏移列

使用 .col-md-offset-* 類將列向右移動。這些類將列的左邊距增加 * 列。

推送和拉取 - 更改列順序

使用 .col-md-push-* 和 .col-md-pull-* 類更改網格列的順序。