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

## 題目

利用 Bootstrap 做出響應式排版：任務中已提供 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 CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ）


## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至 thread 中回報就算完成了喔～解答請參考下方（需打開程式碼的部分觀看）

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