---
tags: 網頁切版直播班 - 2021 夏季班
---

# 8/30 線上 Slack 助教

## 今日助教輪班時間

Bingbingboom：8/30 (一)
回覆時間：早上 9:00 - 中午 12:00，下午 1:00 - 3:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. **以下問題區塊只能由助教自行增加**
5. 助教會將回覆寫在下方問題區塊

## 問題

1. **格可：**
助教好，這邊有幾個問題：
1. 我的 w8 首頁的感受身心區塊，目前是用 BS5 的卡片的「圖片 overlay」類型去改。因為圖片顯示的關係、所以用 object-fit 去改但是沒辦法填滿整個卡片的 div；導致沒有 padding 跟有些網頁大小下會破版。想問助教該怎麼修改? 然後在手機版型下，每張卡片的間距要怎麼設定呢(目前都像截圖一樣黏在一起)?
2. 首頁的右側邊有 fb line ig 的icon，目前我是設定只有 lg 大小才會顯示，但好像在手機版的時候還是會冒出來? 麻煩助教幫我看看是不是哪邊設定有問題謝謝。
[Github repo](https://github.com/lollipopBOBO/Group4-W8-work) / [Github Pages](https://lollipopbobo.github.io/Group4-W8-work/)
> 助教回覆：
> 1. 這邊建議將 card 移到 .col-* 內，不要直接在 col-* 設定樣式，讓大致結構變成：
> ```=html
> <div class="col-md-4">
> <div class="card">
> ...
> </div>
> </div>
> ```
> 在手機版型時，卡片的上下間距可以在 col-* 使用 mb-* 來推出間距哦
> 2. 只要在 lg 才會顯示的話，可以直接設定 .d-none .d-lg-block

---

2. **Valerie：**
老師助教同學們好，這是我的 [作業](https://github.com/valerie300/webWeek8/tree/main/app) / [Github Pages](https://valerie300.github.io/webWeek8/)，
我原本預期「curriculum.html 第 14 行會呈現出滑動效果畫面」，但卻無法滑動，想問下問題出在哪裡？
另外在 133 & 149 行，PC 版的數字會消失，想詢問在哪個部分出錯了?
再麻煩助教解惑，謝謝!
> 助教回覆：
> 1. 不太明白這邊同學想呈現出的滑動效果，另外這邊是可以不需使用 swiper 的
> 2. 這邊是因為同學的 .card-ml-off 把數字部分蓋住了。建議這邊可以嘗試使用 .col-* 搭配 flex 技巧來排版哦

---

3. **debby yeh：**
老師好，
想要請問我在使用 BS5 的 row col 的時候，我知道預設值的 col 是有左右的padding 值，因此在設 col 的時候預期會有左右留白，但不知道為什麼有些區塊是有成功的有些卻沒有?
比如成功的有：「感受身心，活在當下」這段
未成功的：「舒適空間」這段以及「精心設計」
謝謝!
[page](https://debbyyeh.github.io/week8_yoga/) / [repo](https://github.com/debbyyeh/week8_yoga)
> 助教回覆：
> 同學若是在 .col-* 內還需使用 .col-* 的話，需要再補一層 .row 才能再使用 .col-* 哦。大致結構：
> ```=html
> <div class="col-md-6">
> <div class="row">
> <div class="col-md-8">
> ...
> </div>
> </div>
> </div>
> ```

---

4. **Kent：**
助教您好，
我預期右邊區塊訂購人資訊 form ，寬度能填滿整個 col-md-4，但我嘗試 w-100 卻會超過 col-md-4，想請助教幫我看一下如何讓 form 寬度能佔滿整個 col-md-4
[repo](https://github.com/spmdl/exhibinection-website)、[pgae](https://spmdl.github.io/exhibinection-website/checkout.html)
> 助教回覆：
> 使用 position: fixed; 的話，就變成相對於瀏覽器視窗來定位，所以當設定為 width: 100% 的話就變成瀏覽器的寬度所以會超出父層區塊。建議是不使用 fixed 定位，可以將左邊變成可滾動的區塊。如果一定要使用 fixed 的話就只能手動調整到和父層差不多寬度（大概是 width: 27%）

---

5. **沈依蓉：**
助教好:
Repo: https://github.com/lily-oa/yoga_local
Pages: https://lily-oa.github.io/yoga_local/
請問要如何做才能在 375 版型時把卡片的邊距去除，不管用 py-0 或是 my-0 在 card 的程式碼上都無法拿掉它的邊距，我想讓它和上面的圖片
等寬!!!
無法寫在以下連結的那一行 .card 上
https://github.com/lily-oa/yoga_local/blob/master/index.html#:~:text=%3Cdiv%20class%3D%22card%20border-[…]ps-4%20ms-lg-n2%20py-md-10%20py-lg-4%22%3E
> 助教回覆：
> 將[最外層](https://github.com/lily-oa/yoga_local/blob/163f4ac0173b95f0f3c5726721e029d2d8e078f7/index.html#L155)的 .px-4 拿掉就可以哩

---

6. **kaka：**
助教好，
想請教“聽聽怎麼說“這塊，之前有參考了同學的 [討論串](https://hexschool-share.slack.com/archives/C0201HR4W5P/p1629934488471800)，也參考了裡面同學的範例，自己先用 [Code Pen](https://codepen.io/potatokaka/pen/PojqxXV) 做出範例 (RWD 和功能都正常)，
但目前放入自己的專案時，ipad 和手機版的樣式就跑掉了，卡片的寬度好像也需要特別設定寬度，才會出現比較接近設計稿的效果(但看同學的code 是沒有設定寬度)
不知道應該怎麼調整，才能達到和設計稿一樣的樣式？因為全站還有很多地方都會用到此功能，所以還是上來先問一下助教～附上我的 [Repo](https://github.com/potatokaka/HexLayout_DoYoga) 和 [Demo](https://potatokaka.github.io/HexLayout_DoYoga/)，感謝
> 助教回覆：
> 每個 li 都不需設定寬度，將 .card-testimonial 移除就可以哩

---

7. **will：**
老師助教同學們好，這是我的 作業
https://github.com/penuts27/art_exhibition
https://penuts27.github.io/art_exhibition/
想請問我的 m/pc 畫面產生 x 軸的原因是什麼，找很久找不出來，並且在滑到直播回顧的時候會自己消失，並且想問下問題出在哪裡？
> 助教回覆：
> 這是 AOS 造成的哦，因為同學有製作從左右邊出現的動畫，在一開始效果還沒跑完時，內容會在螢幕外所以會產生 x 軸，這邊只要在 body 設定 `overflow-x: hidden;` 就可以哩 ~

---

8. **周周：**
助教您好~我的問題放在 [HackMD](https://hackmd.io/@JHOUJHOU/S1zVwg9-K) 中，想請問助教問題出在那裏? 感謝助教
> 助教回覆：
> 1. collapse 本身就是需要自行點選收合的哦，不會點選另一個，其他的就自動收起來哩。
> 2. 建議每一則留言使用一個 swiper-slide 哦，另外少了 .swiper，還有 mySwiper1 不要直接在 container 使用，建議移到內層。這邊的排版可以嘗試參考 [此討論串](https://hexschool-share.slack.com/archives/C0201HR4W5P/p1629934488471800)
> 3. JS 的部分我先不回覆 ><!

---

9. **Jiang V：**
助教您好，我在這個區塊的每個 img 都有加上一個 badge ， 另外 position 也都設定一樣，但是為什麼 badge 位置會不同，這是我的 [repo](https://github.com/viccjiang/2021layout_week8_doyoga/blob/eb0b5f0dd9560b7681263a632915f4e07e771ffe/app/course.html#L76) / [gh-pages](https://viccjiang.github.io/2021layout_week8_doyoga/course.html) 再請助教協助解惑，謝謝助教 ~
> 助教回覆：
> 因為區塊的寬度不一樣，使用 % 的話算出來的數值就會不一樣哦，這邊建議可以直接給予一個固定的 px（left: ..px）來設定哩

---

10. **zyc：**
助教您好，想請問首頁 swiper 手機版問題：
1）請見 [code](https://github.com/zyan-c/doyoga/blob/fccf64b68e0834a9ff6b7777a70a11bd22c03027/app/index.html#L371-L378)，左右箭頭預計出現在在 ul 的下方，為什麼會出現在 ul 的中間？希望他可以顯示在 ul 下方。
2）為什麼會除了我加入的 material-icons 之外，還有額外的箭頭出現，以及如何移除？因為自己嘗試製作這個區塊失敗，所以參考同學的 code 並直接複製貼上 `swiper-button-prev` 和 `swiper-button-next` 的 code，不是很了解哪個部分設定錯了，附上 [_swiper.scss](https://github.com/zyan-c/doyoga/blob/fccf64b68e0834a9ff6b7777a70a11bd22c03027/app/assets/style/components/_swiper.scss#L58-L117) 以及 [pages](https://zyan-c.github.io/doyoga/) ，謝謝
> 助教回覆：
> 1. 因為 swiper 左右箭頭預設定位是在中間哦。這邊建議可以將 `swiper-button-prev`, `swiper-button-next` 設定
> ```=css
> .swiper-button-prev, .swiper-button-next{
> position: unset;
> width: auto;
> height: auto;
> }
> ```
> 2. swiper 在 `.swiper-button-next` 及 `.swiper-button-prev` 使用偽元素來產生預設箭頭樣式（可以嘗試使用開發人員工具查看）。可以將 `.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after`（右邊箭頭），`.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after`（左邊箭頭） 設定 `content: '';` 清除偽元素的樣式哩

---

11. **ZY Hsu：**
助教您好，
以下是首頁 comment 的手機版，想請問如何讓他自動判斷 按到底會箭頭變深色呢? 謝謝!
附上 [repo](https://github.com/zihyinhsu/YOGA) / [page](https://zihyinhsu.github.io/YOGA/index.html)
> 助教回覆：
> 可以嘗試自行改變此樣式設定 `.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled`。
> swiper 預設當按到底時元素會出現 .swiper-button-disabled 並將透明度設為 0.35 讓整體視覺顏色變淺。同學可以嘗試修改看看哦

---

12. **anna：**
助教您好~
[Repo](https://github.com/annanaha/week8-hw/tree/main/app) / [page](https://annanaha.github.io/week8-hw/)
1. 首頁的聽聽他們怎麼說的 swiper 無法排成 3 欄，還有立即預約頁面（reservation.html）的課程階級區塊，手機版要如何讓卡片換行，變成三行呢？一直無法成功~
2. reservation.html
螢幕縮小時，課程階級卡片高度會不整齊，有嘗試用 h-100 和 flex-grow-1，但一直無法讓三個卡片底部對齊（如下圖）
> 助教回覆：
> 1. 建議可以點選 VS Code 右鍵 -> 格式化文件，將程式碼弄得整齊些，結構有點亂掉，像是 .card 少了結尾標籤，整體後方多了空的 .col-md-4。另外不要同時使用兩個 swiper 像是[這邊](https://github.com/annanaha/week8-hw/blob/19ed6e3a2869331e1c1cf3284e57fa01b6d4e187/app/index.html#L307) .mySwiper .customerswiper，請將 .mySwiper 移除哩。另外同學可以嘗試換成此討論串的 [CDN](https://hexschool-share.slack.com/archives/C0201HR4W5P/p1629892759447800?thread_ts=1629889039.445000&cid=C0201HR4W5P) 哦
> 關於預約頁面換行：如果是使用新版的 CDN 換行要使用 grid 來換行哦
> 可以寫成：
> ```=javascript
> slidesPerView: 1,
> grid:{
> rows: 3, // 變成三行
> fill: 'row', // 變成 row 擴充
> }
> ```
> （請同學幫我依照上述建議調整一下，如果還有問題再跟我說 !）
> 2. 可以將 `.swiper-slide` 設定 `height: auto;` 嘗試看看

---

13. **鉦勝：**
助教你好
想請問 Bootstrap 的字體 .h1 和 .fs-1 的使用，會有使用上的規範嗎？
例如標題的文字都是使用 .h1 .h2，p 段落或是列表都是使用 .fs-1
> 助教回覆：
> 沒有規範哦 ~
> 不過 Bootstrap 的 .h* class 預設會有 line-height 的設定，而 .fs-* 是沒有的哩 ~
> 另外 .h* 如果要自行設定變數的話通常也只會增加到 .h6（因為 HTML 語意標籤只有到 h6，如果再往上設定 h7 .. 會很怪），如果是 .fs-* 則可以無限制增加，同學可以再依照自己的習慣來使用哩 ~

---

14. **群嘉：**
助教你好，不知道為什麼無法使用日期選擇套件 vanillajs-datepicker
自己有在 Codepen 測試過沒問題，放在第八週作業就不知道為甚麼不會動，附上 [page](https://a121515222.github.io/eighth_week/Reservation-2.html) 與 [github-html](https://github.com/a121515222/eighth_week/blob/master/app/Reservation-2.html#L109)、[github-js](https://github.com/a121515222/eighth_week/blob/master/app/assets/js/all.js#L191)、[github-scss](https://github.com/a121515222/eighth_week/blob/master/app/assets/style/component/_vanillajs-datepicker.scss)
謝謝
> 助教回覆：
> 這邊因為同學 all.js [183 ~ 188 行](https://github.com/a121515222/eighth_week/blob/59f3e367b7d48e1ee86cf1ba0c53a3b8cd5b74dd/app/assets/js/all.js#L183-L188) 的 JS 有誤，導致無法讀取到後方日期的程式碼，所以沒有效果哦