引導網格示例

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

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

五個網格層

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

三個相等的列

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

.col-md-4

三等列替代

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

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

混合：移動和桌面

Bootstrap v5 網格系統有六層類：xs（特小，不使用此類中綴）、sm（小）、md（中）、lg（大）、xl（x-large）和xxl（xx -大的）。您幾乎可以使用這些類的任意組合來創建更加動態和靈活的佈局。

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

.col-md-8

.col-6 .col-md-4

.col-6

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

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

天溝

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

.col帶 .gx-4排水溝

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

.col帶 .gy-4排水溝

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

.col帶 .g-3排水溝

容器

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

。容器

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid