Bootstrap 彈性版面練習場
以視覺化方式建構 Bootstrap 5.3 彈性版面，並直接複製精確的工具類別——d-flex、justify-content、align-items、order、grow 等。
預覽
點擊項目即可編輯
產生的 HTML
—
所有處理皆在瀏覽器中完成，不會上傳任何內容。
你設定的類別會從此斷點及更大尺寸開始套用。切換斷點即可建構響應式版面。
容器
項目
0
所選項目
關於 Bootstrap 彈性版面練習場
Bootstrap Flex 遊樂場讓你使用真正的 Bootstrap 5.3 工具類別來建構 flexbox 版面配置,而不是撰寫原始 CSS。透過分段控制項設定容器——方向、換行、justify-content、align-items、間距——點選任何項目即可設定其專屬的 align-self、order、grow 與 shrink 工具類別,並即時觀察預覽畫面重新排列。
斷點切換器讓它不只是個玩具:選擇 sm、md、lg、xl 或 xxl,從該斷點起你設定的類別就會加上響應式字尾——justify-content-md-between、flex-lg-row——完全依照 Bootstrap 行動優先系統從該斷點起套用的方式。最多可加入 12 個項目來模擬真實的元件。
當版面配置看起來正確時,複製產生的 HTML,或只複製容器的類別,直接貼到你的專案中。一切都在你的瀏覽器中運作,不會有任何上傳。
如何使用 Bootstrap 彈性版面練習場
- 使用分段控制項設定容器工具類別——方向、換行、justify-content、align-items 與間距。
- 新增或移除項目(2 到 12 個),以符合你實際的元件。
- 點選某個項目,為它設定專屬的 align-self、order 或 flex 尺寸工具類別。
- 切換斷點,加入從 sm、md、lg、xl 或 xxl 起套用的響應式變體。
- 查看即時預覽,然後複製產生的 HTML 或容器類別。
常見問題
Bootstrap 採行動優先設計:在某個斷點設定的類別,會從該寬度起套用。在選擇 md 時設定 justify-content-between,會產生 justify-content-md-between,在 768px 起生效,並在更大螢幕上持續作用。
此工具輸出的是 Bootstrap 5.3 工具類別(d-flex、justify-content-center、order-2),可直接用於 Bootstrap 專案。Flexbox 遊樂場則產生純 CSS 屬性——依你的技術棧選擇合適的一個。
可以。在預覽畫面中點選任何項目以選取它,然後設定各項目專屬的工具類別,例如 align-self、order、grow 與 shrink。產生的 HTML 會顯示每個項目所配置的確切類別。
2 到 12 個之間。這個範圍涵蓋了從簡單的雙欄標頭到完整工具列的各種情境,同時讓預覽在你實驗時保持易讀。
是的,完全免費,並完全在你的瀏覽器中運作——無需註冊,你建立的內容也不會被上傳到任何地方。
熱門搜尋
Bootstrap 彈性版面練習場
Bootstrap flexbox 產生器
Bootstrap 5 flex 工具類別
d-flex 類別產生器
justify-content align-items Bootstrap
Bootstrap flex 類別建構器
響應式 flexbox Bootstrap 工具
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。