引導網格示例

基本的網格佈局,讓您熟悉 Bootstrap 網格系統中的構建。

在這些示例中,.themed-grid-col該類被添加到列中以添加一些主題。默認情況下,這不是 Bootstrap 中可用的類。

五個網格層

Bootstrap 網格系統有五層,我們支持的每個設備範圍都有一層。每層從最小視口大小開始,並自動應用於較大的設備,除非被覆蓋。

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

三個相等的列

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

.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 v4 網格系統有五層類:xs(特小)、sm(小)、md(中)、lg(大)和 xl(特大)。您幾乎可以使用這些類的任意組合來創建更加動態和靈活的佈局。

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

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

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

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