基本的網格佈局,讓您熟悉 Bootstrap 網格系統中的構建。
在這些示例中,.themed-grid-col
該類被添加到列中以添加一些主題。默認情況下,這不是 Bootstrap 中可用的類。
Bootstrap 網格系統有五層,我們支持的每個設備範圍都有一層。每層從最小視口大小開始,並自動應用於較大的設備,除非被覆蓋。
獲得三個等寬的列,從桌面開始並擴展到大型桌面。在移動設備、平板電腦及以下設備上,列將自動堆疊。
獲取從桌面開始並擴展到各種寬度的大型桌面的三列。請記住,單個水平塊的網格列最多應為 12 個。不僅如此,無論視口如何,列都會開始堆疊。
獲得從桌面開始並擴展到大型桌面的兩列。
全角元素不需要網格類。
根據文檔,嵌套很容易——只需在現有列中放置一行列。這為您提供了從桌面開始並擴展到大型桌面的兩列,在較大的列中還有另外兩列(等寬)。
在移動設備尺寸、平板電腦及以下尺寸下,這些列及其嵌套列將堆疊。
Bootstrap v4 網格系統有五層類:xs(特小,不使用此類中綴)、sm(小)、md(中)、lg(大)和 xl(特大)。您幾乎可以使用這些類的任意組合來創建更加動態和靈活的佈局。
每一層的類都會按比例放大,這意味著如果您計劃為 md、lg 和 xl 設置相同的寬度,您只需要指定 md。
Bootstrap v4.4 中添加的其他類允許容器在特定斷點之前為 100% 寬。