---
# System prepended metadata

title: "\U0001F3C5 Day 32 - 元件與通用類別 I"
tags: [網頁切版直播班 - 2023 夏季班]

---

### 題目

嘗試將元件 [dropdowns](https://getbootstrap.com/docs/5.3/components/dropdowns/#dropstart) 、 元件 [Card](https://getbootstrap.com/docs/5.3/components/card/) 、通用類別 [Media Object](https://getbootstrap.com/docs/5.3/utilities/flex/#media-object) 與 [spacing](https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding) 組合在一起，如圖所示：
![](https://imgur.com/4D5CLnB.png)

> 內文可以複製下方或是自行使用假字
```
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
```
>假圖可使用 [Fake images please?](https://fakeimg.pl/) 或其他工具皆可

作業指示：
* 點擊右上方 icon 時可以開啟 [向左的 dropdowns](https://getbootstrap.com/docs/5.3/components/dropdowns/#dropstart)。
* 右上的 icon 可自行選擇不同資源載入(示範為 bootstrap 的 icon)。
* 圖片與文字需間格 16px ，第一段文字需與第二段文字間格 48px ，第二段文字下方 margin 為 0 。
* 圖片與文字排版方式可以參考 [Media object](https://getbootstrap.com/docs/5.3/utilities/flex/#media-object)

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
https://codepen.io/jmimiding4104/pen/gOQZWem
 -->


回報區
---


| # |      Discord      |                                CodePen / 答案      |
|:-:|:-----------------:|:--------------------------------------------------:|
| 1 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/VwVNXBa)|
| 2 |Moreene|[CodePen](https://codepen.io/Moreene/pen/gOQyedW?editors=1100)|
| 3 |Berlin|[CodePen](https://codepen.io/3qberlin/pen/mdQgxjR)|
| 4 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/oNQOqVx) |
| 5 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/BaGErOw) |
| 6 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/ExOJEeB?editors=1100) |
| 7 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/JjeVLxo?editors=1010) |
| 8 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/JjeVvjG?editors=1000) |
| 9 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/ZEmZoOg) |
| 10 | awei | [Codepen](https://codepen.io/hong-wei/pen/xxQeWmx?editors=1000) |
| 11 | townyuan | [Codepen](https://codepen.io/townyuan/pen/oNQOdgz) |
| 12 | runweiting | [Codepen](https://codepen.io/weiting14/pen/MWzRVBz) |
| 13 | vvay | [Codepen](https://codepen.io/pellmssx-the-sasster/pen/wvQZzXO) |
| 14 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/eYQoreN) |
| 15 | Eden | [Codepen](https://codepen.io/iseden/pen/JjeVvOE)|
| 16 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/mdQgxZw) |
| 17 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/abQxGKB?editors=1000) |
| 18 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/yLQrKqR) |
| 19 | m_m | [Codepen](https://codepen.io/minnn7716/pen/RwqOJoE) |
| 20 | Paul#7426| [Codepen](https://codepen.io/paul-1997/pen/PoxgBYZ)
| 21 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/WNYWyqR) |
| 22 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/yLQrqVK?editors=1000) |
| 23 | Uli | [Codepen](https://codepen.io/uli1313/pen/MWzRBeV) |
| 24 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/VwVNdQq) |
| 25 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/ExOJeVa) |
| 26 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/rNQbLYP) |
| 27 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/GRwLXpM) |
| 28 | rjjq | [Codepen](https://codepen.io/rjjq/pen/JjeVeXz) |
| 29 | Vic_liou | [Codepen](https://codepen.io/allenliou-java/pen/JjeVmvB) |
| 30 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/eYQoQYM?editors=1000) |
| 31 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/wvQZQYP) |
| 32 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/LYXvggX?editors=1100) |
| 33 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/OJaGqyX?editors=1100) |
| 34 | yunhsinnnnnn| [Codepen](https://codepen.io/yun___hsin/pen/vYQMPMy) |
| 35 | ming0712| [Codepen](https://codepen.io/StevenHuang/pen/BaGEvEM) |
| 36 | shcopy | [Codepen](https://codepen.io/shcopy/pen/LYXvmpR) |
| 37 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/vYQMwNz?editors=1100) |
| 38 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/NWEmZGd) |
| 40 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/mdQgNOB) |
| 41 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/OJaGYyG?editors=1010) |
| 42 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/LYXvwwO) |
| 43 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/BaGExqv?editors=1100) |
| 44 | Jules Hsu | [Codepen](https://codepen.io/cjntfsoq-the-animator/pen/bGQydVP?editors=1010) |
| 45 | Randy | [Codepen](https://codepen.io/landy510/pen/gOQJara?editors=0100) |
| 46 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/YzRbyzo?editors=1100) |
| 47 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/QWJRjzm) |
| 48 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/MWzdadZ?editors=1100) |
| 49 | PayRoom#8328 |[CodePen](https://codepen.io/water38198/pen/XWywdeg)
| 50 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/gOQJrpQ) |
| 51 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/XWywmvw) |
| 52 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/MWzRNNa?editors=1000) |
| 53 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/WNYmwmZ) |
| 54 | wind | [Codepen](https://codepen.io/wind7y/pen/wvQLozN) |
| 55 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/gOQNxBo) |
| 56 | Sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/PoxrBKw?editors=1010) |
| 57 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/NWEZodJ) |
| 58 | Long | [Codepen](https://codepen.io/Loonng/pen/KKrjExv?editors=1010) |
| 59 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/bGQXdzP?editors=1100) |
| 60 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/gOQVLxK) |
| 61 | .icesam | [Codepen](https://codepen.io/icesam/pen/VwVogap) |
| 62 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/NWEQoOm) |
| 63 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/abPooyN) |
| 64 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/PoXYoZL) |
| 65 | Lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/jOQjyXa?editors=1100) |
| 66 | 郭芙蘭 ＃6374 | [Codepen](https://codepen.io/flora_Kuo/pen/jOQgbxB) |
| 67 |KC_8685|[Codepen](https://codepen.io/cathy7411/pen/wvRwEmJ)|
| 68 |andersonshen|[Codepen](https://codepen.io/luxyenni-the-bold/pen/RwEbENz)|
| 69 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/BavaMWd) |
| 70 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/zYyYVrr) |
| 71 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/abPOZeJ) |
| 72 | cura | [Codepen](https://codepen.io/curalin/pen/qBLdjQr?editors=1000) |
| 73 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/PoXqQOz?editors=1010) |
| 74 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/abPOEOJ) |
| 75 | ryan_chou | [Codepen](https://codepen.io/csw8524/pen/ExGjOWx) |
| 76 | Martin | [Codepen](https://codepen.io/markyourpage/pen/RwErmgv) |
| 77 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/MWZymRo) |
| 78 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/MWZevBd?editors=1000) |
| 79 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/vYvKomK) |
| 80 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/VwqbdPo) |
| 81| patrickpie | [Codepen](https://codepen.io/patrickpie/pen/WNLMPWm?editors=1000) |


- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```