Bootstrap 格線遊樂場

以視覺化方式建構響應式 Bootstrap 5.3 格線版面，並複製精確的類別名稱 —— row、col、偏移、排序、間距與對齊。

預覽點選某一欄進行編輯

產生的 HTML

—

所有處理都在您的瀏覽器中完成 —— 不會上傳任何內容。

斷點

您設定的類別將從此斷點起向上套用。切換斷點即可建構響應式版面。

列 .row

row-cols

gutter g-*

gutter-x gx-*

gutter-y gy-*

justify-content

align-items

欄

選取的欄

col

offset

order

align-self

關於 Bootstrap 格線遊樂場

Bootstrap Grid 遊樂場使用真正的 Bootstrap 5.3 網格系統來建構響應式的列與欄版面配置。在一列中加入最多 12 個欄,點選任何一欄以設定其寬度、偏移與順序,並在該列上調整間距與對齊方式——預覽畫面與產生的標記會隨每次變更即時更新。

由於 Bootstrap 網格採行動優先設計,斷點切換器是核心功能:在基礎狀態設定欄為 col-6,在 md 設定為 col-md-4,你就建構出了「行動裝置上堆疊、桌面上並排三欄」這種經典模式,而無需撰寫任何程式碼。偏移、順序與間距類別都採用相同的響應式字尾。

輸出結果是乾淨、可直接複製貼上的 HTML——一個 row div 及其欄子項目,並附上你設定的確切類別。可複製整段程式碼,或只複製 row 的類別;一切都在你的瀏覽器本機運作。

Bootstrap 的網格寬度為 12 個單位。合計跨欄數超過 12 的欄會在同一列中換到新的一行——這是預期行為,也常被刻意用來建立多行網格。

為該欄設定全寬的基礎跨欄數(col-12),並在某個斷點設定較窄的跨欄數,例如 col-md-4。在 768px 以下,欄會堆疊;從 md 起會並排三欄。斷點切換器正是建構這種效果。

偏移會將欄往右推移若干個網格單位(offset-md-2 會跳過兩格)。可用偏移來置中單一欄,或建立刻意的留白,而不必插入空的填充欄。

可以——列上的間距工具類別可控制欄與欄之間的水平與垂直間距。此遊樂場將它們與列對齊選項一起呈現,並且和其他網格類別一樣接受響應式字尾。

是的,完全免費。此建構工具只在你的瀏覽器中運作,因此你的版面配置絕不會被上傳或儲存到伺服器端。