# Bootstrap 排版 ###### tags: `BootStrap` Date : 2022/05/10 <a href="https://getbootstrap.com/docs/4.0/utilities/borders/">**Bootstrap4.0**</a> (4.0 會使用到 JQ，需要引入JQ。) ```html <!-- 4.x 需要 jQuery --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js'></script> <!-- bundle.js 包含 popper.js 與 bootstrap.js --> <script src="./js/bootstrap.bundle.min.js"></script> ``` **Bootstrap5.0** <a href="https://bootstrap5.hexschool.com/">中文</a> <a href="https://getbootstrap.com/">英文</a> 5.x 不再依賴 jQuery，功能以原生 js 來實作 ## 事前準備(以下都是5.0) 1. 下載 BootStrap ![](https://i.imgur.com/NwLmV5h.png) ![](https://i.imgur.com/bkGemRr.png) 2. 資料夾內的 map 可以刪除節省空間 3. CSS將樣式表 \<link> 複製-貼上到 \<head> 中其他所有的樣式表之前，以便載入 Bootstrap 的 CSS。 ```html <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> ``` 4. **JS** 我們的許多元件都需使用 JavaScript 才可以運行。具體來說，它們需要我們自己的 JavaScript 插件和 Popper。將以下 \<script> 之一放在頁面末尾， \</body> 結尾標籤之前以啟用它們。 **Bundle** 使用我們兩個 bundle 中的其中一個來嵌入所有的 Bootstrap JavaScript 插件。bootstrap.bundle.js 和 bootstrap.bundle.min.js 都包含了 Popper 以使用我們的工具提示 (Tooltips) 和彈出提示框 (Popovers)。請參閱 內容 以獲得更多關於 Bootstrap 包含內容的資訊。 **放在html下面** ```html <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> ``` ## 排版 ### 斷點 (Breakpoints) ![](https://i.imgur.com/e8UjU6s.png) ### 容器 (Containers) 容器是 Bootstrap 的基本建構區塊，在給定的設備或是視區中包含、填充和對齊你的內容。 分為固定容器、滿版容器，用來裝載各種內容，以及維持版型視覺所呈現的寬度。 Bootstrap 本身自帶三種不同的容器： - .container, 每一個響應式斷點都會設置一個 max-width (固定) - .container-fluid, 所有斷點都是 width: 100% (滿版) - .container-{breakpoint}, 直到指定斷點之前，都會是 width: 100% 下表說明了每個容器的 max-width 與每個斷點處的原始 .container 和 .container-fluid 的比較。 可以在實際操作中觀看它們，並在我們的網格範例中進行比較。 ![](https://i.imgur.com/a4V0Wr3.png) ##### 預設容器 我們的預設類別 .container 是響應式的, 是一個響應的、固定寬度的 container，內含的 max-width 會在每個斷點中改變數值 ```html <div class="container"> <!-- Content here --> </div> ``` ##### 響應式容器 使用響應式容器時將會保持在寬度 100%，直到達到指定斷點為止，接下來我們將針對每個較高的斷點設置 max-width。例如，.container-sm 在到達 sm 斷點之前的寬度都為 100％，之後它將以 md、lg、xl 和 xxl 設置。 ```html <div class="container-sm">100% wide until small breakpoint</div> <div class="container-md">100% wide until medium breakpoint</div> <div class="container-lg">100% wide until large breakpoint</div> <div class="container-xl">100% wide until extra large breakpoint</div> <div class="container-xxl">100% wide until extra extra large breakpoint</div> ``` ##### 流體容器 針對容器使用 .container-fluid, 它將橫跨可視區域的整個寬度。(滿版) ```html <div class="container-fluid"> ... </div> ``` ### 網格系統 (Grid system) - 為 12 欄位系統，指在某個斷點尺寸，一列欄位分布的狀況。 - .row 為一列 - .col 為欄位 :::info ```html= <div class="container"> <div class="row"> <div class="col"> Column </div> <div class="col"> Column </div> <div class="col"> Column </div> </div> </div> ``` 一列三欄 ![](https://i.imgur.com/XazveBY.png) ::: :::info ```html= <div class="container"> <div class="row"> <div class="col-sm"> Column </div> <div class="col-sm"> Column </div> <div class="col-sm"> Column </div> </div> </div> ``` sm以下尺寸時 ![](https://i.imgur.com/T0nlCXA.png) ** 達到設定斷點尺寸時分配欄位 ::: #### 設置一欄寬度 斷點綴詞後面有數字的 class，例如 .col-6、.col-sm-6、.col-md-6、.col-lg-6、.col-xs-6、.col-xxl-6... 使用數字分配欄寬，12欄位系統，總和為 12，超過會換行 :::info ```html= <div class="row"> <!-- xs 以上兩欄均分 --> <div class="col-6">col-6</div> <div class="col-6">col-6</div> <!-- md 以上三欄均分 --> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <!-- xl 以上四欄均分 --> <div class="col-xl-3">col-xl-3</div> <div class="col-xl-3">col-xl-3</div> <div class="col-xl-3">col-xl-3</div> <div class="col-xl-3">col-xl-3</div> <!-- lg 以上 8、4 分 --> <div class="col-lg-8">col-lg-8</div> <div class="col-lg-4">col-lg-4</div> <!-- xs 以上 3、6、3 分 --> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> <!-- 超過 12 會換行 --> <div class="col-lg-8">col-lg-8</div> <div class="col-lg-5">col-lg-5</div> </div> <h3>超過 12 換行</h3> <div class="row"> <div class="col-8">col-8</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-5">col-5</div> <div class="col-4">col-4</div> <div class="col-9">col-9</div> </div> ``` ![](https://i.imgur.com/6AqJu9S.png) ::: - 決定某個欄寬的等份，其餘都想等寬 :::info ```html <div class="row"> <!-- flex:1 0 0%，平均分配剩餘空間 --> <div class="col">將剩餘6等份均分，得到3等份</div> <!-- 寬度設定成 50% --> <div class="col-6">最小尺寸佔據6等份</div> <!-- flex:1 0 0%，平均分配剩餘空間 --> <div class="col">將剩餘6等份均分，得到3等份</div> </div> ``` ![](https://i.imgur.com/K9uzSCv.png) -------------------------------------- 用於 很難均分的狀況，例如佔據5等份，剩餘7等份無法用數字均分 ```html <div class="row"> <div class="col">col</div> <div class="col-5">col-5</div> <div class="col">col</div> </div> ``` ![](https://i.imgur.com/uxRoybl.png) ::: ### 可變寬度內容 col - { 斷點(breakpoint) } - <font color="red">auto</font> 系列，意思是指以==內容寬度==為準。 - 以內容寬度為準 :::info ```html <div class="row justify-content-center"> <div class="col-lg-2">col-lg-2</div> <div class="col-lg-auto">col-lg-auto</div> <div class="col-lg-2">col-lg-2</div> </div> ``` col-lg以下 ![](https://i.imgur.com/gzsciIB.png) / col-lg以上 ![](https://i.imgur.com/d2dhrJQ.png) ::: --- - 如果內容太多會佔據整個列寬 :::info ```html <div class="row justify-content-center"> <div class="col-lg-2">col-lg-2</div> <div class="col-lg-auto">措施革命生物偉大在這前來，目標更新時間，黃金電子商務水溝億元都沒衝突，名稱第二試驗預計，請在倒是新鮮天使相冊出口服務老師中間準備存款取消歡迎您會在，身體出發以下殺手對外套件功能威望，妹妹點擊遊客群眾會議我都不行中學斗內有個報紙原料處於實施，指揮一場，人員。 </div> <div class="col-lg-2">col-lg-2</div> </div> ``` ![](https://i.imgur.com/8zWvu2k.png) ::: ------- - 中間是一張圖片內容 :::info ```html <div class="row"> <div class="col-xl">好多技術點這裡萬華我要現代化依舊為此和他合理發送不願，舉行如下左右認為一場信箱留言板商城下載地圖引起是以你怎不來，依法主流輕輕為什麼提升科技習慣和諧點擊數隨意提出協助，通信皇帝一級食物人們，台北依靠是一個，方便不見購買為你政府報告以後現在至少，控制你的到。</div> <div class="col-xl-auto"> <img src="https://picsum.photos/600/400/?random=10" style="width: 100%;height:100%;object-fit: cover;"> </div> <div class="col-xl">的說新浪，完全害怕是的私服因為如果你房價，實際上右鍵文化調整相比來說人家是從學校，探索寫作眼淚電視劇特性超市數字媒體漂亮遵守損失，容易隊伍進行本科對你，進一步第一國有插入他人安裝眾多財富進來，業務一款，維護情人教育活動把握陽光道理身後過了簽名都市曾經飲食。</div> </div> ``` xl以下 ![](https://i.imgur.com/rPpjgdA.png) / / / xl以上 ![](https://i.imgur.com/Gkq7lf5.png) ::: ### 混合和匹配 一列一列自我解釋各種斷點目前的狀況。 :::info ```html <div class="row"> <div class="col-md-8">col-md-8</div> <div class="col-6 col-md-4">col-6 col-md-4</div> </div> ``` md以下 ![](https://i.imgur.com/jmbrltj.png) md以上 ![](https://i.imgur.com/Z5utbua.png) ::: :::info ```html <div class="row"> <div class="col-6 col-md-4">col-6 col-md-4</div> <div class="col-6 col-md-4">col-6 col-md-4</div> <div class="col-6 col-md-4">col-6 col-md-4</div> </div> ``` md以下 ![](https://i.imgur.com/ozitvWC.png) md以上 ![](https://i.imgur.com/Lh550G8.png) ::: ```html <h3>練習:設計一列各種尺寸欄位的分布</h3> <p>最小尺寸垂直排列，md 兩欄、lg 三欄、xl 四欄</p> <div class="row"> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> <div class="col-md-6 col-lg-4 col-xl-3">col</div> </div> ``` ### 列與欄 另一種快速指定欄位均寬的方式，也有斷點設置，.row-cols-{breakpoint}-*，設定在 .row 彈性容器上。 ```html <!--最小尺寸開始，每列都是 2 欄--> <div class="row row-cols-2"> <div class="col">column</div> <div class="col">column</div> <div class="col">column</div> <div class="col">column</div> </div> <!--lg尺寸開始，每列都是 4 欄--> <div class="row row-cols-lg-4"> <div class="col">column</div> <div class="col">column</div> <div class="col">column</div> <div class="col">column</div> </div> <!--最小尺寸開始，欄位寬度會是內容寬度--> <div class="row row-cols-auto"> <div class="col">column</div> <div class="col">column</div> <div class="col">column</div> <div class="col">column</div> </div> <!--.row-cols-4 指定每列四欄，每欄寬度是 25 %，但 .col-6 是 50%，因此最後一欄會換行。--> <div class="row row-cols-4"> <div class="col">column</div> <div class="col">column</div> <div class="col-6">column</div> <div class="col">column</div> </div> <!--.row-cols-* 配合斷點混合使用--> <div class="row row-cols-1 row-cols-lg-3 row-cols-xl-4"> <div class="col">column</div> <div class="col">column</div> <div class="col">column</div> <div class="col">column</div> </div> ``` ### 巢狀 可以使用巢狀網格，例如在 .col-sm-9 的空間使用 12 欄網格 :::info ```html <div class="row"> <div class="col-sm-3"> Level 1: .col-sm-3 </div> <div class="col-sm-9"> <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div> ``` ![](https://i.imgur.com/nyGv62K.png) ::: -------- ### 欄位與卡片 應用練習 ``` html= <div class="container"> <h1>欄位與卡片</h1> <div class="row"> <div class="col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img src="https://picsum.photos/300/200/?random=10" class="card-img-top img-fluid" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img src="https://picsum.photos/300/200/?random=10" class="card-img-top img-fluid" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img src="https://picsum.photos/300/200/?random=10" class="card-img-top img-fluid" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img src="https://picsum.photos/300/200/?random=10" class="card-img-top img-fluid" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img src="https://picsum.photos/300/200/?random=10" class="card-img-top img-fluid" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img src="https://picsum.photos/300/200/?random=10" class="card-img-top img-fluid" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> ``` col-md-6 col-lg-4 col-xl-3 md以上 2欄 /lg以上 3欄 /xl以上 4欄 ![](https://i.imgur.com/xVDuJnE.png) / ![](https://i.imgur.com/mT9GHRl.png) / ![](https://i.imgur.com/dMdiOnf.png) / ## 欄(columns) .row 是彈性容器，.col 系列的欄位是彈性項目，可以使用 BS 提供的彈性盒屬性相關 class 來對齊。 主軸、次軸對齊屬性都支援斷點。 ### 對齊 #### 垂直對齊(align-items) - align-items-start ```html <div class="row align-items-start" style="height:200px;"> <div class="col">columns</div> <div class="col">columns</div> <div class="col">columns</div> </div> ``` ![](https://i.imgur.com/NB8alhH.png) - align-items-center ```html <div class="row align-items-center" style="height:200px;"> <div class="col">columns</div> <div class="col">columns</div> <div class="col">columns</div> </div> ``` ![](https://i.imgur.com/AImpFgp.png) - align-items-end ```html <div class="row align-items-end" style="height:200px;"> <div class="col">columns</div> <div class="col">columns</div> <div class="col">columns</div> </div> ``` ![](https://i.imgur.com/sxziWJz.png) ### 彈性項目自行對齊(align-self) ```html <div class="row" style="height:200px;"> <div class="col align-self-start">columns</div> <div class="col align-self-center">columns</div> <div class="col align-self-end">columns</div> </div> ``` ![](https://i.imgur.com/WoDs5OG.png) ### 水平對齊(justify-content) ``` html <div class="row justify-content- * "> <div class="col-4">columns</div> <div class="col-4">columns</div> </div> ``` - justify-content-start ![](https://i.imgur.com/iYkzJWg.png) - justify-content-center ![](https://i.imgur.com/XMPsdVG.png) - justify-content-end ![](https://i.imgur.com/v22uFzU.png) - justify-content-between ![](https://i.imgur.com/Rqbz64i.png) - justify-content-evenly ![](https://i.imgur.com/iTYZEKD.png) - justify-content-around ![](https://i.imgur.com/VMDIPdB.png) #### 對齊斷點的支援 - 以 justify-content 為例子 ```html <div class="row justify-content-end justify-content-md-center justify-content-lg-around"> <div class="col-2">columns</div> <div class="col-2">columns</div> <div class="col-2">columns</div> </div> ``` ![](https://i.imgur.com/ziLRdRE.png) ![](https://i.imgur.com/9rpQk7E.png) ![](https://i.imgur.com/N4ejYAE.png) ## column breaks 欄的換行 在 Flexbox 中將列拆分成新行需要一個小 hack : 當你想中斷你的欄到新的一行，可增加一個元素為 width: 100%。正常來說，通常這是通過多個 .row 完成的，但此方法也是可行的。 ```html <div class="row"> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <!-- Force next columns to break to new line at md breakpoint and up --> <div class="w-100 d-none d-md-block"></div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> </div> ``` - 使用 d-none、d-block 來決定要不要換行 ```html <div class="container"> <div class="row"> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <!-- Force next columns to break to new line at md breakpoint and up --> <div class="w-100 d-none d-md-block"></div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> </div> </div> ``` ## 排序(Order) :::info - order-* ， 支援RWD斷點 ```html <div class="row text-white"> <div class="col order-3">第一欄</div> <div class="col order-5">第二欄</div> <div class="col order-1">第三欄</div> <div class="col">第四欄</div> <div class="col">第五欄</div> </div> ``` ![](https://i.imgur.com/BtAco2d.png) ::: :::info - order-first、 order-last ```html <div class="row text-white"> <div class="col order-last">第一欄</div> <div class="col">第二欄</div> <div class="col">第三欄</div> <div class="col">第四欄</div> <div class="col order-first">第五欄</div> </div> ``` ![](https://i.imgur.com/uPNX8mv.png) ::: ## 欄的推移 使用 .offset-md-* 向右移動列。 透過 * 增加欄的左邊距。 例如 .offset-md-4 增加四欄位移 .col-md-4。 ![](https://i.imgur.com/GrvcdrQ.png) ```html <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> </div> </div> ``` ![](https://i.imgur.com/ti1EjGA.png) ------------------------ - margin-auto ```html <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div> </div> <div class="row"> <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div> <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div> </div> <div class="row"> <div class="col-auto me-auto">.col-auto .me-auto</div> <div class="col-auto">.col-auto</div> </div> </div> ``` ![](https://i.imgur.com/wzY5Fyj.png) - 獨立 Column class ```css .clearfix::after { display: block; clear: both; content: ""; } ``` ```htmlembedded= <h3>獨立 Column class</h3> <div class="clearfix"> <!-- 這邊的 .col-md-6 是拿來當一般寬度(50%)使用。 --> <img src="https://picsum.photos/300/200/?random=10." class="col-md-6 float-md-end mb-3 ms-md-3" > <p> A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image. </p> <p> As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read. </p> <p> And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here. </p> </div> ``` ![](https://i.imgur.com/F85LIFy.png) ## CSS Grid 在 Bootstrap 5 中，我們添加了一個選項來啟用一個單獨的網格系統，該系統建構在 CSS Grid 上但帶有 Bootstap twist。您仍然可以獲得可以隨心所欲使用的 class 來構建響應式佈局，但在幕後採用了不同的方法。 - CSS Grid 是可選的通過設定 $enable-grid-classes: false 禁用預設網格系統並通過設定 $enable-cssgrid: true 啟用 CSS Grid。然後重新編譯你的 Sass。 - 用 .grid 取代 .row 的例子。 .grid class 設定 display: grid 並創建一個使用 HTML 建構的 grid-template。 - 用 .g-col-* classes 替換 .col-* classes。這是因為我們的 CSS Grid columns 使用 grid-column 屬性，而不是 width。 - Columns and gutter 大小通過 CSS 變數設定。 將這些設定在父層 .grid，並使用 --bs-columns 和 --bs-gap 自定義在任何你想要的 inline 或 stylesheet 中。 未來，Bootstrap 可能會轉向混合解決方案，因為 gap 屬性已經幾乎完全實現了瀏覽器對 flexbox 的支持。 **主要區別** 與預設網格系統相比： - Flex 通用類別不會以相同的方式影響 CSS Grid columns。 - Gaps 取代 gutters。gap 屬性替換了我們預設網格系統中的水平 padding，其功能更像是 margin。 - 因此，與 .row 不同，.grid 沒有負 margin 並且不能使用 margin 通用類別來改變 grid gutters。預設情況下，Grid gaps 水平和垂直方向都會應用。可以參閱自定義部分觀看更多詳細資訊。 - 內聯和自定義樣式應該被視為 modifier classes 的替代品。(e.g., style="--bs-columns: 3;" vs class="row-cols-3") 巢狀的部分是相似的。但可能需要您在巢狀的 .grid 上重置 column 數。可以參閱 nesting section 觀看更多詳細資訊。 ```css .grid { /* 放置網格線 欄網格線 grid-template-columns 欄網格線 grid-template-rows */ display: grid; grid-template-columns: 200px 50% 200px; grid-template-rows: 200px 200px 200px 200px; gap: 20px; } /* rows => 列網格線 */ /* columns => 欄網格線 */ .box { background: #333; color: white; } ``` ```html <div class="grid"> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> </div> ``` ![](https://i.imgur.com/K9RvtyH.png) ## Gutters (gy-* /gx-* ) > Gutters 是在欄 (columns) 之間的 padding, 用來響應式的間隔和對齊 Bootstrap 網格系統中的內容。 在 .row 使用 gx-*、gy-* 這些 class，改變的是 --bs-gutter-x、--bs-gutter-y 兩個原生變數， 兩個原生變數對應了 .row 的 margin-left、margin-right 與 margin-top，以及 col 的 padding-left、padding-right。 ```html <div class="row g-5"> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> ``` ![](https://i.imgur.com/PnFKK9F.png)