---
# System prepended metadata

title: "\U0001F3C5 Day 36"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 36

## 網格練習

### 題目

利用 [Bootstrap 網格系統](https://bootstrap5.hexschool.com/docs/5.1/layout/grid/) 做出響應式排版：任務中已提供 HTML 的部分，請同學新增 Bootstrap class 將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排
>![](https://i.imgur.com/zfi2Imu.png)

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

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

### HTML
```htmlmixed=
<div class="container">
  <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="">
    </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="">
    </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="">
    </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="">
    </div>
  </div>
</div>
```

> 需透過 Codepen 繳交 （載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css)）

## 回報流程

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

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

<!-- 解答：https://codepen.io/hexschool/pen/zYWEQQV -->


回報區
---


|       Discord       |                           CodePen / 答案                           |
|:-------------------:|:------------------------------------------------------------------:|
|   Iris Huang#6727   |         [CodePen](https://codepen.io/ythuang/pen/GRxYGzm)          |
|     布魯諾#7239     |         [CodePen](https://codepen.io/bruno-yu/pen/WNzaKwa)         |
|    Amberhh#2465     |   [Codepen](https://codepen.io/Amberhh/pen/bGvmjwx?editors=1010)   |
|     黃士桓#7654     |      [codePen](https://codepen.io/shr-huan-huang/pen/XWExBjJ)      |
|      zera#6060      | [codepen](https://codepen.io/zera-tseng/pen/dymgjvW?editors=1100)  |
|    WEI_RIO#9342     |   [CodePen](https://codepen.io/wei_wu/pen/NWYOBve?editors=1000)    |
|     JarDar#6980     |        [codepen](https://codepen.io/jardarpen/pen/MWVPBOg)         |
|  bonnieli1414#4906  |        [codepen](https://codepen.io/jardarpen/pen/MWVPBOg)         |
|      大衛#4869      |  [codePen](https://codepen.io/exnsrpjc/pen/ExEdppg?editors=1000)   |
|   PeggyLiao#1552    | [CodePen](https://codepen.io/PeiJu-Liao/pen/ExEdpLg?editors=1100)  |
|   Potatolee#7749    |        [CodePen](https://codepen.io/potatoleee/pen/KKoGBGP)        |
|     Benson#6763     |         [CodePen](https://codepen.io/kumashow/pen/VwXEBOX)         |
|      威爾#1694      |         [CodePen](https://codepen.io/WILL_Wu/pen/ExEdpqm)          |
|     Clara#1275      |         [CodePen](https://codepen.io/bsupixqu/pen/QWmZVWW)         |
|    CloThEs#7837     |         [CodePen](https://codepen.io/CloThEsZ/pen/vYRVzYa)         |
|      小諾#1866      |         [CodePen](https://codepen.io/noichan/pen/gOeBdPE)          |
|      L0F0#8733      |    [CodePen](https://codepen.io/l0f0/pen/poLxORb?editors=1000)     |
|     ssozr#4680      |          [codepen](https://codepen.io/ssozr/pen/GRxYXmL)           |
|    LinaChen#1796    |         [codepen](https://codepen.io/LinaChen/pen/zYWmJaR)         |
|      int#7518       |  [Codepen](https://codepen.io/intHuang/pen/poLxOZe?editors=1010)   |
|     azami#5986      |          [CodePen](https://codepen.io/azami/pen/LYdgJMM)           |
|      yuyu#6310      |  [CodePen](https://codepen.io/yuyu0905/pen/oNqaPKO?editors=1000)   |
|  Ryan Chiang#6649   |        [Codepen](https://codepen.io/ryanchiang/pen/yLKRRNp)        |
|      威0#6919       | [codepen](https://codepen.io/n0918679182/pen/gOeBBRw?editors=1000) |
|   LHchien33#6232    |  [codepen](https://codepen.io/lin_chien/pen/YzaJJxX?editors=1000)  |
|       Ke#1391       |        [Codepen](https://codepen.io/federerke/pen/KKoGxqM)         |
|      Vera#5592      |          [Codepen](https://codepen.io/skvera/pen/NWYLerG)          |
|   StellaHsu#2687    |       [Codepen](https://codepen.io/stella950114/pen/eYMPPxX)       |
|      小白#2406      |        [CodePen](https://codepen.io/gracewhite/pen/WNzaaoE)        |
|      阿蘇#8531      |         [CodePen](https://codepen.io/susu8327/pen/dymgQoO)         |
|   我是泇吟 #5189    |         [CodePen](https://codepen.io/kljuqbxs/pen/abYRQWN)         |
|      Tori#1248      |         [CodePen](https://codepen.io/FlyTori/pen/mdxzQBX)          |
|      QOO#8446       |   [CodePen](https://codepen.io/QOOQOOQ/pen/RwMeqrg?editors=1000)   |
|       YI#0863       |   [CodePen](https://codepen.io/YI0305/pen/ExEdOJZ?editors=1100)    |
|      雷雷#7844      | [CodePen](https://codepen.io/lei-yi-jie/pen/OJvBrMG?editors=1010)  |
|     Melon#0380      |         [CodePen](https://codepen.io/BalaFang/pen/oNqaJeM)         |
|   suihsilan#9485    |        [CodePen](https://codepen.io/suihsilan/pen/KKoGJzX)         |
|     Henry#7386      |          [CodePen](https://codepen.io/h1nr9/pen/KKoGJRR)           |
|    RayChen#6088     |       [CodePen](https://codepen.io/raychen1996/pen/zYWmbWq)        |
|   Sentiments#4883   |         [codepen](https://codepen.io/ythuang/pen/GRxYGzm)          |
|    Daisy_Li#4231    |   [CodePen](https://codepen.io/lidairong-gmail-com/pen/xxWyeqp)    |
|      yu魚#1330      |          [CodePen](https://codepen.io/Yu_yu/pen/RwMeOLv)           |
|      瑞追#8227      |         [CodePen](https://codepen.io/owlu0905/pen/wvmYbvW)         |
| Glamorouscoast#4095 |          [CodePen](https://codepen.io/GcTzw/pen/gOeBJGw)           |
|     Joyce#3790      | [CodePen](https://codepen.io/joycehuang/pen/bGvxmWY?editors=1000)  |
|     艾芮絲#6060     |        [CodePen](https://codepen.io/wangyingju/pen/qBoJzOb)        |
|     Chi#7605       |        [Codepen](https://codepen.io/YoChi84/pen/VwXEJmp)           |
|     Yunei#6323       |        [Codepen](https://codepen.io/Yunei/pen/jOzejej)           |
|     楓之聲#6945     |         [Codepen](https://codepen.io/sshane258/pen/jOzegNO)         |
|     Winnie Wu#5468     |         [Codepen](https://codepen.io/Pooh-Wu/pen/mdxzgbG?editors=1100)         |
|     黑白兔#0684    |         [Codepen](https://codepen.io/johnny329/pen/JjLmgBZ)         |
|     YU #0618    |         [Codepen](https://codepen.io/yoken_/pen/PoRxYzN)         |
| christina#6185 | [codepen](https://codepen.io/chrisc0210/pen/oNqQxgV)
| Hsiu#8767 | [codepen](https://codepen.io/amy-hsiu/pen/dymQXoX)
|     Bonnie邦妮#7529    |         [Codepen](https://codepen.io/Calista316/pen/ZExmOYP)         |
|     𝓛𝓊𝒸𝓎#8635    |         [Codepen](https://codepen.io/lucygirl/pen/jOzQVbm)         |
|     郭芙蘭#6374    |         [Codepen](https://codepen.io/flora_Kuo/pen/YzajdNo)         |
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/LYdXxwj)|
|鉦勝 #8333|[Codepen](https://codepen.io/atckmax823/pen/xxWQrvq)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/oNqPWmB)|
| Clara Cai#7097|[Codepen](https://codepen.io/Clara-Snowy/pen/PoRxxzK) |
| 紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/VwXVVNM?editors=1010) |
| JackC#0411 |[Codepen](https://codepen.io/key0329/pen/MWVzzNY) |
| 咻蹦#1526 |[CodePen](https://codepen.io/emmasyu/pen/qBoQLwy)|
| Fang#4680 | [Codepen](https://codepen.io/std95174/pen/ZExwray?editors=1000)|
|J_u_d_y#5993 | [Codepen](https://codepen.io/J_u_d_y/pen/rNdPEZP?editors=1000)|
| allen#0876 | [Codepen](https://codepen.io/sodarman/pen/WNzmeRb)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/yLKwJyz?editors=1000) |
| Yuna Huang#2692 | [CodePen](https://codepen.io/Yuna1002/pen/yLKwVWX) |
|Cliff#4606|[codepen](https://codepen.io/Cliff_hex/pen/KKoYvOY?editors=1000)|
|mei#8421|[codepen](https://codepen.io/Shila-Chen/pen/rNdbdor)|
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/ExEzjrm)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/ZExNrPW)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/gOeJzar?editors=1000)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/gOeNvrx?editors=1010)
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/RwMzEGb)|
|jin.huang#4666|[Codepen](https://codepen.io/haha1196/pen/ZExdwad)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/LYdKwxq)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/yLKmYNL)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/KKoOQbJ?editors=1100)|
|yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/KKRKXVq)|
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/xxjGXRY)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/MWGaZQM)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/rNvLMjr)|