# 🗞Bootstrap5 21天課程 5/24(一)每日任務

## 題目
根據以下三題寫出對應的代碼。
對知識理解不夠深入者可參考 [Bootstrap 5 網格](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/#nesting) 與 5/19 Bootstrap 實戰營直播內容

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

  <div class="container">
    <div class="row">
      <div class="col-4 border">col-4</div>
      <div class="col-8 border">col-8</div>
    </div>
  </div>

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

  <div class="container">
    <div class="row">
      <div class="col-4 col-md-3 col-lg-2 border">col</div>
      <div class="col-4 col-md-3 col-lg-2 border">col</div>
      <div class="col-4 col-md-3 col-lg-2 border">col</div>
      <div class="col-4 col-md-3 col-lg-2 border">col</div>
      <div class="col-4 col-md-3 col-lg-2 border">col</div>
      <div class="col-4 col-md-3 col-lg-2 border">col</div>
    </div>
  </div>

### 第三題

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

  <div class="container">
    <div class="row">
      <div class="col-4 border">col-4</div>
      <div class="col-8 border">col-8
        <div class="row">
          <div class="col-10 border">col-10</div>
          <div class="col-2 border">col-2</div>
        </div>
      </div>
    </div>
  </div>

[codepen連結](https://codepen.io/jimmyanso/pen/ZEeyYZw)

###### tags: `六角學院 - 21 天 Bootstrap 5 新手實戰營`