---
# System prepended metadata

title: 5/24(一) 每日任務

---

# 5/24(一) 每日任務



### 第一題
請寫出一個在所有設備上都是 **左邊佔四 右邊佔八** 的區塊。
![](https://i.imgur.com/sXt68c7.png)


答案：
```htmlembedded=
<div class="container">
    <div class="row">
        <div class="col-4">col-4</div>
        <div class="col-8">col-8</div>
    </div>
</div>
```

### 第二題
請做出一個在 PC 版中佔據兩欄 平板中佔三欄 手機版中佔四欄 的區塊。
![](https://i.imgur.com/y1Eu58a.png)
![](https://i.imgur.com/NPCfXHY.png)
![](https://i.imgur.com/Qc31dHF.png)


答案：
```htmlembedded=
<div class="container">
  <div class="row">
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
  </div>
</div>
```


### 第三題
請利用第一題的答案 在右邊佔八的區塊中添加一個左邊佔據十欄右邊佔據兩欄的**巢狀網格**。
![](https://i.imgur.com/FN0UmjJ.png)


答案：
```htmlembedded=
<div class="container">
    <div class="row">
      <div class="col col-4">col-4</div>
       <div class="col col-8">
        <div class="row">
          <div class="col col-10">col-10</div>
          <div class="col col-2">col-2</div>    
        </div>
      </div>
    </div>
  </div>

```
