三個相等的列
獲得三個等寬的列,從桌面開始並擴展到大型桌面。在移動設備、平板電腦及以下設備上,列將自動堆疊。
.col-md-4
.col-md-4
.col-md-4
三不等列
獲取從桌面開始並擴展到各種寬度的大型桌面的三列。請記住,單個水平塊的網格列最多應為 12 個。不僅如此,無論視口如何,列都會開始堆疊。
.col-md-3
.col-md-6
.col-md-3
兩列
獲得從桌面開始並擴展到大型桌面的兩列。
全寬,單列
全角元素不需要網格類。
具有兩個嵌套列的兩列
根據文檔,嵌套很容易——只需在現有列中放置一行列。這為您提供了從桌面開始並擴展到大型桌面的兩列,在較大的列中還有另外兩列(等寬)。
在移動設備尺寸、平板電腦及以下尺寸下,這些列及其嵌套列將堆疊。
混合:移動和桌面
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-12 .col-sm-6 .col-lg-8
.col-xs-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