---
# System prepended metadata

title: "\U0001F3C5 Day 27 - 網格練習"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 27 - 網格練習

網格系統是 Bootstrap 提供的一套排版工具，讓我們能快速地建構各種多欄排版，同時也支援 RWD 的版型切換，是非常便利的排版工具。

### 題目

利用 [Bootstrap 網格系統](https://getbootstrap.com/docs/5.3/layout/grid/) 做出響應式排版：任務中已提供 HTML 的部分，請同學新增 Bootstrap class 將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，並在圖片下方應用[通用類別的文字](https://getbootstrap.com/docs/5.3/utilities/text/#font-size)新增不同大小的文字，如圖所示：
>桌機尺寸時設為四個一排
>![](https://imgur.com/WPHClav.png)

>平板尺寸時設定為兩個一排
>![](https://imgur.com/RxWHoxL.jpg)

>手機尺寸時設定為一個一排
>![](https://imgur.com/Fa3Ng5I.jpg)

### HTML

>此 HTML 會出現 x 軸，可理解 [Containers](https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work) 與 [格線系統](https://getbootstrap.com/docs/5.3/layout/grid/#how-it-works) 的相關知識後，再次修改下方程式碼避免**雷點** x 軸 出現。

```htmlmixed=
<div class="...">
  <div class="row">
    <div class="...">
      <img class="img-fluid" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片1<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片2<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片3<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片4<h2>
    </div>
  </div>
</div>
```

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
https://codepen.io/jmimiding4104/pen/OJBdvBb
 -->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | Nooooora |[Codepen](https://codepen.io/Nora-Ch/pen/raOeMbM?editors=1000)|
|  02  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/RNWaGmY) |
|03|Saika|[CodePen](https://codepen.io/saika4501/pen/empZdqd)|
| 04 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/EaVKgGZ) |
| 05 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/azvNBOL)|
| 06 | Shawn |[Codepen](https://codepen.io/LiShang/pen/WbQwoQb)|
| 07 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/bNVERGR)|
| 08 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/VYvamPE?editors=1000)|
| 09  |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/wBKGgvo) |
|  10  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/ByoKQXz) |
|  11  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/qEOZqwL?editors=1100) |
|  12  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/XJmdpqG?editors=1010) |
|  13  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/GgpZWGG) |
|  14  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/ZYbWKWB) |
|  15  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=bNVpWpb) |
|  16  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/qEOZmyJ?editors=1100) |
|  17  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/jEbqmey) |
|  18  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/XJmdeWp?editors=1100) |
|  19  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/gbarXba?editors=1000) |
|  20  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/VYvarmw?editors=1000) |
 |  21  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/ByoKJZP?editors=1100) | 
|  22  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/PwPNEGQ) | 
|  23  |  ChrisWang  |[Codepen](https://codepen.io/Wang-Chris/pen/NPGNXpO) |
|  24  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/pvjyLNp?editors=1000) |
|  25  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/ogjxeRp) |
|  26  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/ByoKGKL) |
|  27  |  Eagle Huang  |[Codepen](https://codepen.io/YuCi/pen/dPYMaVq) |
|  28  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/yyYOwPj?editors=1100) |
|  29  |  Hao  |[Codepen](https://codepen.io/Howell/pen/RNWaOOy) |
|  30  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/pvjbzgJ?editors=1000) |
|  31  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/yyYJLEE) |
|  32  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/dPYXWpd) |
|  33  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/azvZWaE?editors=1100) |
|  34  |  suemma  |[Codepen](https://codepen.io/suemma/pen/azvZwQx?editors=1100) |
|  35  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/ByopbBq?editors=1100) |
|  36  |  Marco  |[Codepen](https://codepen.io/MarcoChiu/pen/pvjRmyO) | 
|  37  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/pvjPyGQ?editors=1010) | 
|  38  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/gbaxYva) | 
|  39  |  B  |[Codepen](https://codepen.io/Babel777/pen/zxvdGRL) |
|  40  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/xbwXJvb?editors=1100) |
|  41  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/dPYVxZW?editors=1000) |
|  42  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/empeXLj?editors=1010) |
|  43  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/xbwWdyE) |
|  44  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/myeGodV) |
|  45  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/ogjayzy) |
|  46  |  cindy  |[Codepen](https://codepen.io/a50134/pen/raObRQW) |
|  46  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/gbPVpZz?editors=1010) |

<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->