---
# System prepended metadata

title: 8/9(一) 每日任務
tags: [網頁切版直播班 - 2021 夏季班]

---

---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/9(一) 每日任務

## 題目

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

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

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


需透過 Codepen 繳交 （載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ）

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


 

### 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>
```

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
**解答及回報方式請參考下方**


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

<!-- 解答：[Codepen 範例](https://codepen.io/Bingbingboom/pen/oNZWLQO) -->


回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/oNZWLQO
-->

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/LYWvGyN
-->

<!-- 2. Jasmin
Codepen：https://codepen.io/thejasmin/pen/QWdOGMb
-->

<!-- 3. Alpha  //♥
Codepen：https://codepen.io/alphatero/pen/YzVRJNV
-->

<!-- 4. Gui
https://codepen.io/guitimliu/pen/JjNemEX -->

<!-- 5. Karen Huang
https://codepen.io/Coding_Snorlax/pen/JjNemNK?editors=1100
-->

<!-- 6. Jean
Codepen：https://codepen.io/jean-liu/pen/BaRGqpx
-->

<!-- 7. Lina Chen
codepen: https://codepen.io/LinaChen/pen/poPQxWm
-->

<!-- 8. xing
codepen: https://codepen.io/xing10/pen/WNjYaXL
-->

<!-- 9. yijun
codepen:
https://codepen.io/sandy3068/pen/wvdQYqx
-->

<!-- 10.大衛
codepen:https://codepen.io/exnsrpjc/pen/ZEKmqaz
-->

<!-- 11.Tori
codepen: https://codepen.io/hayen/pen/PomxyRa?editors=1000
-->

<!-- 12.peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/gOWQBzz?editors=1010
-->
<!-- 13. roger
codepen: https://codepen.io/rogerchuang/pen/QWvJZQo?editors=1000
-->

<!-- 14 .kevinhes 
codepen: https://codepen.io/kevinhes/pen/MWmzPXW
-->

<!-- 15. 雷古娜
https://codepen.io/tinahopo/pen/NWjEOgO -->

<!-- 16. lumei
https://codepen.io/l_umei/pen/gOWQBQj -->


<!-- 17.陳sam
https://codepen.io/euldpliv/pen/dyWQgrZ?editors=1010
-->

<!-- 18. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/Pomxyrx?editors=1000
-->

<!-- 19. Jun Chan
codepen: https://codepen.io/chujunchan/pen/ExmOdGg?editors=1100
-->

<!-- 20. KK
codepen: https://codepen.io/potatokaka/pen/abWQQmy?editors=1000
-->

<!-- 21. Gill
codepen:https://codepen.io/Gill-Chin/pen/abWQQWV
-->

<!-- 22.harold
https://codepen.io/YuWin0805/pen/yLbQQpV
-->

<!-- 23.阿瓜
https://codepen.io/hoick/pen/WNjYYgw?editors=1010 -->

<!-- 24.huanan
https://codepen.io/hua_nan/pen/Pomxxvw
-->

<!-- 25. Sz
https://codepen.io/szyln/pen/oNWQQKm
-->

<!-- 26. WilsonHan
https://codepen.io/wi0821/pen/abWQQej
-->

<!-- 27. Tsai 明達
CodePen: https://codepen.io/bmzpfyxe/pen/xxqaNmZ?editors=1000
-->

<!--28.童筱涵
https://codepen.io/hsiaohan/pen/abWQPWX?editors=1000
-->

<!--29. YuriT
CodePen: https://codepen.io/wenfisht/pen/GRmwPyq
-->

<!--30. Cate Chang
CodePen: https://codepen.io/tutz/pen/JjNemQJ
-->

<!--31. Elaine Liu
https://codepen.io/elaine7598/pen/poPQqra
-->
<!--32. icy
https://codepen.io/ccsbjzze-the-sasster/pen/BaRGvBj -->

<!-- 33. ZOE WU
https://codepen.io/Zoechiueh/pen/oNWQmyW?editors=1000
-->

<!--34. Peggy Tsai
https://codepen.io/pei-chi-tsai/pen/KKmrJgb
-->

<!--34. 群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/pen/MWmzxga?editors=1010
-->

<!--35.Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPLjoG
-->

<!-- 36.Page
https://codepen.io/kanawin821/pen/jOmQJXV?editors=1000
-->

<!-- 37.Sam li
codepen:https://codepen.io/sam830623/pen/OJmaqGV
-->

<!-- 38.curry
codepen: https://codepen.io/Ted19851223/pen/QWvJPyv
-->

<!-- 39. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/wvdQZNr 
-->

<!--40. 阿和
codepen:https://codepen.io/shnny/pen/ZEKmNXg?editors=1000
-->

<!-- 41. hellocrab
https://codepen.io/hellocrab/pen/BaRGgOa
-->

<!-- 42: Sec
https://codepen.io/Sentiments/pen/MWmZgod
-->

<!-- 43.Hi Annie
https://codepen.io/lhohdalu/pen/zYwyOar
-->

<!-- 44.黃士桓
https://codepen.io/shr-huan-huang/pen/XWRoWbN?editors=1000
-->

<!-- 45. 肉鬆
codepen: https://codepen.io/klrkicog/pen/oNWJNjp
-->


<!-- 46. KinHei Shing
https://codepen.io/kinhei-shing/pen/PomXoGV
-->

<!-- 47. Jessie Cheng
https://codepen.io/JessieMosbi/pen/jOmXEBL
-->

<!-- 48. Erin Huang
https://codepen.io/ErinHuang/pen/zYwyYqZ
-->

<!-- 49. Meng
https://codepen.io/MGHN/pen/GRmExgg
-->

<!-- 50. Jim Hwang
https://codepen.io/jimh1129/pen/YzVdPvX
-->

<!-- 51. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/VwbqvzB
-->

<!-- 52. 沈依蓉 
https://codepen.io/lily-oa/pen/qBmLqJR
-->

<!-- 53. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/eYWbWrO
-->

<!-- 54. ZY Hsu
https://codepen.io/zihyin/pen/wvdRqxJ?editors=1100 -->

<!-- 55 zy
https://codepen.io/zy_c/pen/abWPVdJ-->
<!--56. Sihle Huang
code: https://codepen.io/bugbug777/pen/vYmvpgo?editors=1100
-->

<!-- 57. KatieZhao
https://codepen.io/katiezhao/pen/abWPaMx?editors=1000 -->

<!-- 58. OOber
https://codepen.io/xtsjrjdv/pen/qBmLJgq
-->

<!-- 59. Riley
https://codepen.io/jjpxbprd/pen/dyWwwXa
-->

<!-- 60.Shani
https://codepen.io/ShaniMa/pen/bGWOzJm -->

<!-- 61. 魚魚
https://codepen.io/YuYu_29/pen/VwbgjLz 
-->

<!-- 62. 佳文
https://codepen.io/chiawen81/pen/YzVBXLN?editors=1100
-->

<!-- 63. una
https://codepen.io/xbsapbas-the-vuer/pen/eYWxzzp
-->

<!-- 64. Yurie
https://codepen.io/_u_jung/pen/abWXZLJ
-->

<!-- 65. ellie
https://codepen.io/hsu-yu/pen/KKmJbbv
-->

<!-- 66. tim Chou
https://codepen.io/tim-chou/pen/qBmggae
-->

<!-- 67. axlrock1021
https://codepen.io/andy1021/pen/bGWZRwx
-->


<!-- 68. jimmyFang
https://codepen.io/pohxiqqo/pen/qBmvxmz?editors=1000
-->

<!-- 69. anna
https://codepen.io/annhys/pen/jOmJejp?editors=1000
-->

<!-- 70. 袁祥恩
codepen:
https://codepen.io/ovfxsavp-the-bashful/pen/yLbrGBB?editors=1000
-->

<!-- 71. YOYO
https://codepen.io/lumedkle/pen/YzVMBjz
-->

<!-- 72. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/gOWyyOK
-->

<!-- 73. Alberto
https://codepen.io/AlbertoLL/full/eYWajdQ
-->

<!-- 74. Joe Kuo
https://codepen.io/alertislow/pen/XWRLmXx
-->

<!-- 75. WA
https://codepen.io/ldddl/pen/jOmjaNw
-->

<!-- 76. YJ kung
https://codepen.io/bagelover/pen/jOwOvjp
-->

<!-- 77. AKI 
https://codepen.io/akichen27/pen/jOwrWRE
-->