引導網格示例

基本的網格佈局,讓您熟悉 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-xxl-4
.col-xxl-4
.col-xxl-4

三個相等的列

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

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

三等列替代

通過使用這些.row-cols-*類,您可以輕鬆地創建具有相等列的網格。

.col的孩子 .row-cols-md-3
.col的孩子 .row-cols-md-3
.col的孩子 .row-cols-md-3

三不等列

獲取從桌面開始並擴展到各種寬度的大型桌面的三列。請記住,單個水平塊的網格列最多應為 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(特大)。您幾乎可以使用這些類的任意組合來創建更加動態和靈活的佈局。

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

.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-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

天溝

使用.gx-*類,可以調整水平間距。

.col.gx-4排水溝
.col.gx-4排水溝
.col.gx-4排水溝
.col.gx-4排水溝
.col.gx-4排水溝
.col.gx-4排水溝

使用.gy-*類來控制垂直排水溝。

.col.gy-4排水溝
.col.gy-4排水溝
.col.gy-4排水溝
.col.gy-4排水溝
.col.gy-4排水溝
.col.gy-4排水溝

使用.g-*類,可以調整兩個方向的排水溝。

.col.g-3排水溝
.col.g-3排水溝
.col.g-3排水溝
.col.g-3排水溝
.col.g-3排水溝
.col.g-3排水溝

容器

Bootstrap v4.4 中添加的其他類允許容器在特定斷點之前為 100% 寬。v5 添加了一個新的xxl斷點。

。容器
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid