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