Bootstrap視覺化佈局工具

用欄寬設定頁面骨架

這個工具把 Bootstrap 格線配置整理成可調整的列與欄：選擇一般或全寬容器、列間距，新增或移除列與欄，再替各欄設定文字、欄寬及自訂 class。右側會提供版面預覽與可複製的程式碼，可選 HTML 或 React JSX。它適合先排出內容區、側欄或卡片列等結構，後續仍由你放進自己的頁面並整合。

Bootstrap 5 的格線以容器、列和欄組織版面；一列以 12 個欄位單位作為配置基準。欄寬設定會轉成對應的格線 class，例如 col-md-8 表示從 md 斷點起佔 8 個單位，較小尺寸則依較低斷點的設定延續。官方文件列出六種預設斷點；斷點採最小視窗寬度條件，較大的斷點規則會套用到更寬的尺寸。詳細類別規則可參考 Bootstrap 5.3 格線文件。

看懂容器、間距與欄寬

• 容器：container 使用 Bootstrap 的響應式容器寬度策略；container-fluid 則延伸至可用寬度。選擇時依版面是否需要兩側留白而定。
• 間距：可選 g-0 至 g-5，控制同一列中欄位之間的格線留白。若專案有自訂樣式，實際視覺間距仍要回專案確認。
• 欄寬：每欄可分別設定 base、sm、md、lg、xl、xxl 的 1 至 12 欄跨度。工具會在跨度變動的斷點加入類別；未變動的後續尺寸沿用較早設定。

同一列的欄寬合計若超過 12，Bootstrap 可能讓多出的欄位換到下一行；小於 12 則會留下未配置空間。這些數字描述的是格線占比，不是固定像素寬度，也不會自動替內容決定視覺層級。

從欄位設定到可複製輸出

1. 先決定容器使用一般寬度或全寬，並設定欄間距。預設版面已有兩列範例，可直接修改，也能新增列或欄。

2. 為每個欄位填寫標籤與內容，再依螢幕尺寸選擇 1 到 12 的跨度。標籤用來辨識預覽區塊；內容會放進輸出片段。列與欄也可加入自訂 class，請填入預計由專案樣式表處理的類別名稱。

3. 逐一切換預覽尺寸，檢查各欄是否符合預期。以常見的主內容加側欄為例，可在窄螢幕都設為 12，在 md 設為 8 與 4；兩欄便能在較窄尺寸上下排列、md 起改為 8:4 分欄。

4. 選擇 HTML 或 React JSX，複製結果並貼入相對應的專案位置。HTML 片段需要頁面載入相容的 Bootstrap CSS；React JSX 則需放在適合的 React 專案環境中。

複製前可留意每列顯示的跨度合計，並把視窗縮窄檢查長標題、按鈕或其他真實內容是否擁擠。若某個寬度的結果不合預期，回到該欄調整相應斷點，而不是只更改預覽尺寸。

輸出與預覽常見疑問

整合前請在目標專案確認

此工具產生的是格線配置片段，不會建立完整網站，也不會替內容補上標題階層、語義標籤、鍵盤操作或無障礙資訊。欄位內容按文字輸出；自訂 class 是否有效，取決於專案中對應的 CSS。若使用的 Bootstrap 版本或自訂斷點與官方預設不同，格線類別與版面表現也可能不一致。正式使用前，請在實際專案檢查窄螢幕排列、長文字、互動需求與語義結構。