# 🏅 Day 33 - Stretched link 連結延伸(第六週 - 基礎諮詢服務區塊) [Stretched link](https://bootstrap5.hexschool.com/docs/5.1/helpers/stretched-link/) 是 Bootstrap 提供的連結延伸功能,用途是讓原本按鈕的點擊範圍擴大到父層區塊,提升使用者體驗。 以[第六週設計稿](https://www.figma.com/design/omevevD7bxbB3wQfL3jXR8/%E5%85%AD%E8%A7%92%EF%BD%9C%E8%81%B7%E6%97%85-WorkWay%EF%BD%9C%E8%81%B7%E6%B6%AF%E8%AB%AE%E8%A9%A2%E5%AA%92%E5%90%88-%EF%BC%88student-ver.%EF%BC%89?node-id=4047-17386&t=zI07EhYe5b3M68MC-0)的基礎諮詢服務區塊為例,請同學試著將 Stretched link 功能加入按鈕中。 ![image](https://hackmd.io/_uploads/HJ633dRVgl.png) ### 題目 了解 Stretched link 作用原理後,可嘗試自行完成整塊排版,或使用該 [CodePen 模板](https://codepen.io/fhljksmg-the-styleful/pen/OPVqroY?editors=1000),試著修改 `...` 的部分(共四處),讓按鈕點擊範圍延伸到整張卡片區塊。 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: https://codepen.io/fhljksmg-the-styleful/pen/emNXbvZ?editors=1100 --> 回報區 --- |#|Discord|CodePen / 答案| |:----:|:----:|:----:| | 01 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/jEbVdrQ) | | 02 | Nooooora | [Codepen](https://codepen.io/Nora-Ch/pen/YPypBYx?editors=1000)| | 03 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/EaVNrEK)| | 04 | pastor |[Codepen](https://codepen.io/peter_hung/pen/OPybdOE) | | 05 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/ogjYmKo?editors=1000) | | 06 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/qEOqgYR)| | 07 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/XJmNGea?editors=1010)| | 08 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/zxvobQj?editors=1000)| | 09 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/PwPbrNV) | | 10 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/jEbVjzq?editors=1000) | | 11 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/azvBgej) | | 12 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/YPyNzxJ) | | 13 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/qEOREYe) | | 14 | 7lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/NPGdqbB?editors=1000) | | 15 | suemma |[Codepen](https://codepen.io/suemma/pen/yyYgOgw) | | 16 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/jEbyGeJ?editors=1000) | | 17 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ogjBpJN?editors=1000) | | 18 | Sam.S.T.Y |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/JoYEpLX?editors=1000) | | 19 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/wBKgOvQ) | | 20 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/ogjZQoG) | | 21 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/bNVWNeN?editors=1000)| | 22 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/azvwVEv?editors=1000)| | 23 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=empRMWa) | | 24 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/JoYyogv?editors=1000) | | 25 | Hao |[Codepen](https://codepen.io/Howell/pen/MYaExgO) | | 26 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/vENePeN) | | 27 | 伊迪 |[Codepen](https://codepen.io/eku10rei/pen/azvqEXo?editors=1000) | | 28 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/pvjxZvW) | | 29 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/xbwmqRK?editors=1000) | | 30 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/PwPvxJa) | | 31 | NGNLzenos |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/ZYQQRMN?editors=1000) | | 32 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/xbVKLGp?edit) | <!-- 快速複製 --> <!-- | 排序 | 姓名 |[Codepen](連結) | -->