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

## 網格練習

### 題目

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

>平板尺寸時設定為兩個一排
>

>手機尺寸時設定為一個一排
>

### HTML

<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://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)|