# 0521 每日任務

### 第一題
請寫出一個在所有設備上都是 **左邊佔四 右邊佔八** 的區塊。

知識點：
1. 構建網格時 最外層需有一個 container
2. container 裡面是一個 row (表示一行)
3. 左邊跟右邊的先後順序？先寫的在左邊 依序往右排列。

答案：

<div class="container">
    <div class="row">
      <div class="col-4 bg-secondary ">.col-4</div>
      <div class="col-8 bg-primary ">.col-8</div>
    </div>
  </div>

### 第二題
請做出一個在 PC 版中佔據兩欄 平板中佔三欄 手機版中佔四欄 的區塊。

知識點：
1. col col-sm col-md col-lg 分別代表什麼意思？

答案：

  <div class="container mb-5">
    <div class="row">
      <div class="col-md-4 col-lg-6 col-sm-3 col-3  bg-success border border-dark">.col</div>
      <div class="col-md-4 col-lg-6 col-sm-3 col-3  bg-success border border-dark">.col</div>
      <div class="col-md-4 col-lg-6 col-sm-3 col-3  bg-success border border-dark">.col</div>
      <div class="col-md-4 col-lg-6 col-sm-3 col-3  bg-success border border-dark">.col</div>
      <div class="col-md-4 col-lg-6 col-sm-3 col-3  bg-success border border-dark">.col</div>
      <div class="col-md-4 col-lg-6 col-sm-3 col-3  bg-success border border-dark">.col</div>
    </div>
  </div>

### 第三題
請利用第一題的答案 在右邊佔八的區塊中添加一個左邊佔據十欄右邊佔據兩欄的**巢狀網格**。

知識點：
1. 在 col 中添加巢狀網格 一定要在 col 中加上 row 再在 row 下添加 col

答案：

<div class="container mb-5">
    <div class="row">
      <div class="col-4 bg-secondary border border-dark">.col-4</div>
      <div class="col-8 bg-secondary border border-dark">
       .col-8
        <div class="row">
          <div class="col-10 bg-secondary border border-dark">.col-10</div>
          <div class="col-2 bg-secondary border border-dark">.col-2</div>
        </div>
      </div>
    </div>
  </div>

###### tags: `Bootstrap 5`