引導網格示例
基本的網格佈局,讓您熟悉 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