三個相等的列

獲得三個等寬的列,從桌面開始並擴展到大型桌面。在移動設備、平板電腦及以下設備上,列將自動堆疊。

.col-md-4
.col-md-4
.col-md-4

三不等列

獲取從桌面開始並擴展到各種寬度的大型桌面的三列。請記住,單個水平塊的網格列最多應為 12 個。不僅如此,無論視口如何,列都會開始堆疊。

.col-md-3
.col-md-6
.col-md-3

兩列

獲得從桌面開始並擴展到大型桌面的兩列。

.col-md-8
.col-md-4

全寬,單列

全角元素不需要網格類。


具有兩個嵌套列的兩列

根據文檔,嵌套很容易——只需在現有列中放置一行列。這為您提供了從桌面開始並擴展到大型桌面的兩列,在較大的列中還有另外兩列(等寬)。

在移動設備尺寸、平板電腦及以下尺寸下,這些列及其嵌套列將堆疊。

.col-md-8
.col-md-6
.col-md-6
.col-md-4

混合:移動和桌面

Bootstrap 3 網格系統有四層類:xs(手機)、sm(平板電腦)、md(台式機)和 lg(更大的台式機)。您幾乎可以使用這些類的任意組合來創建更加動態和靈活的佈局。

每一層的類都會按比例放大,這意味著如果您計劃為 xs 和 sm 設置相同的寬度,您只需要指定 xs。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

混合:移動設備、平板電腦和台式機

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

列清

清除特定斷點處的浮動,以防止內容不均勻的尷尬包裝。

.col-xs-6 .col-sm-3
調整視口大小或在手機上查看示例。
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

偏移、推和拉復位

在特定斷點處重置偏移、推送和拉取。

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0