---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/14(三) 每日任務

## 題目

利用 Bootstrap 做出響應式排版：任務中已提供 HTML 的部分，請同學新增 Bootstrap class 將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排
>

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

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

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


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

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


<!-- 解答：[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.小羊
Codepen：
https://codepen.io/eqsmebaz-the-selector/pen/LYyxLvz
-->

<!-- 3.黃彩雲
Codepen: https://codepen.io/corin19/pen/XWRpaNR
-->

<!-- 4.羿宣
Codepen: https://codepen.io/Ann828/pen/yLbgoOO
-->

<!-- 5.玉凌
Codepen: https://codepen.io/ruby376758123/pen/ExmZvmw
-->

<!-- 6.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/JjNEyBB -->

<!-- 7.廖奕慈
Codepen:https://codepen.io/yiciLiao/pen/BaRpdej?editors=1010
-->

<!-- 8.JT
Codepen:https://codepen.io/jsht-the-animator/pen/abWpyea
-->

<!-- 9. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/rNmjGBd -->

<!-- 10. 薰
Codepen：https://codepen.io/chiaoshin/pen/bGWgrMV -->

<!-- 11.Cloudia
Codepen: https://codepen.io/hkps87/pen/OJmWxog -->

<!-- 12. 莊承叡
Codepen： https://codepen.io/Ray_ty39/pen/YzVNrbG
-->

<!-- 13. 黃郁芳
Codepen: https://codepen.io/YuFang0323/pen/abWpVzz -->

<!-- 14. Jack
Codepen: https://codepen.io/JackChen89/pen/yLbgzmG -->

<!-- 15. 廖仕雅
Codepen: https://codepen.io/sophia0121/pen/eYWgeEY -->

<!-- 16. 彥碩
CodePen: https://codepen.io/nelsonsu/pen/vYmyVay -->

<!-- 17. Iris
CodePen: https://codepen.io/hungyen/pen/rNmjpLj -->

<!-- 18. 劉子瑜
CodePen: https://codepen.io/superfish195/pen/YzVNYMb -->

<!-- 19. 馮旻
CodePen: https://codepen.io/tboqkvhk/pen/jOmyYJy?editors=1000-->

<!--20. 小松
Codepen：https://codepen.io/120061203/pen/BaRpYyK
-->

<!-- 21.小胖
cCodepen: https://codepen.io/a1073315/pen/YzVNaQQ -->

<!-- 23.人中
Codepen: https://codepen.io/renchong2424/pen/jOmyzqQ -->

<!-- 24.陳方云
codepen:https://codepen.io/ssnnny/pen/ZEKLxVG -->

<!-- 25. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/gOWgvXw?editors=1000
-->

<!-- 26. 德德
Codepen: https://codepen.io/Chiouder/pen/ZEKLmpN
-->

<!-- 27. 辰
Codepen: https://codepen.io/dnangelapril/pen/xxdgmeJ
-->

<!-- 28. 張筱萱
Codepen: https://codepen.io/big-banana/pen/NWjdwKM
-->

<!-- 29. Steve
Codepen: https://codepen.io/steve5631/pen/eYWgxox
-->

<!-- 30. 劉永琦
Codepen: https://codepen.io/wjsvypvv-the-decoder/pen/eYWgoLR -->

<!-- 31. 姚賢芸
Codepen: https://codepen.io/crazzyamy/pen/zYwNXMp -->

<!-- 32. Genie
Codepen: https://codepen.io/hcliii/pen/MWmJdJQ -->

<!-- 33. 書妤
Codpen： https://codepen.io/shuyu227/pen/YzVZEWG -->

<!-- 34. 霈楹
Codpen： https://codepen.io/nrweahgl-the-selector/pen/bGWRYrR -->

<!-- 35. 陳瑋崗
Codpen： https://codepen.io/weigang-chen/pen/dyWZdrZ?editors=1010 -->