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

# 9/3 線上 Slack 助教

## 今日助教輪班時間

Hong di Chen：9/3 (五)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

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

## 注意

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

## 問題

1. 穎旻：
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？
> 助教回覆： 因為在....所以..，於是產生 ... 的結果

---

1. Karen Huang
助教你好，我想請問有關boostrap格線系統的觀念，然後程式碼在codepen：
之前上課有聽到老師說，col外一定要是row，但我昨天自己在試格線系統，我想要做出平板以上的一邊是照片，一邊是色塊區域然後可以切割出2個col-6區塊，結果我在html第七行的地方嘗試要加入row，要切割出兩個col-6卻失敗了，會變成是一個col-6內塞兩個文字，反倒是我目前沒有在第七行加row，卻是成功的？？有看過Boostrap文件但還是不確定原因。
我的第一個問題是，我想在平板以上的色塊區域內再切出兩個col-6，目前這樣的寫法是對的嗎？
第二個問題是，這樣的寫法在文件上是屬於Column wrapping嗎？

> 助教回覆：建議在 HTML 第七行 .color 加上 row
> 可以參考[文件](https://getbootstrap.com/docs/5.1/layout/grid/#nesting)

---

2. Jiang V:cat:
助教您好，我也想請問有關格線系統的問題，還是想問一下這個區塊怎麼調整成像設計稿一樣，先前已在每日助教服務有問過，也有嘗試助教給的方法，但是還是沒辦法如願將空間分配好，所以目前我是參考其他同學用 pb 以及 pt 的方式 互相擠壓，先讓他們乖乖待在格線內，但覺得這個做法好像沒有特別好，如果我把這兩個 class 拿掉，然後我在上面那張圖 (src="./assets/images/white round table near brown wooden chair.jpg) 下一個 class -> mb-md-9 往下推，他們就突破這個區塊的底部破版，想請問這個可以怎麼解決，然後讓都各自佔 50% 排在隔線內，為什麼不能用 margin 向下推，推擠就會超出格線範圍 ? 這是我的 repo / gh-pages 再請助教協助釐清觀念，感謝助教 ~

> 助教回覆：
> 因為 margin 不會被 border-box 吸收，而 padding 會，若你想使用 margin 推擠，建議最左方的大圖片將高度寫死（依照設計稿是 444px ），其旁邊兩張小圖設定高度 207px 這樣在使用 mb-md-9(30px) 就會剛好（444 = 207 * 2 + 30）

---

3. Tori
助教好，我想問一個很離奇的狀況，在本地端測試網頁載入和切換時 AOS 都能很順暢的撥放，但如果是上傳到 github pages 的話，每次載入和切換頁面時就會高機率卡頓導致 AOS 無法撥放，需要重新刷新 ( 但仍有機會卡頓 )，想知道是甚麼原因造成的。
附上 Youtube 影片 、 repo、 github pages (edited)

> 助教回覆： 可能是圖片 size 太大的關係，造成讀取上會變得比較慢的關係

---

4. 格可
想再問一下助教，我這邊把col拉到獨立一層後、大於lg的大小時，文字還是會破版...想問一下該怎麼設定好?謝謝
https://github.com/lollipopBOBO/Group4-W8-work
https://lollipopbobo.github.io/Group4-W8-work/ (edited)

> 助教回覆：
> img .impact 不要寫死寬度，設定 width: 100% 讓他配合 container 收放即可

---

5. zyc
助教你好，
預期結果：hover卡片時會放大，且卡片背景顏色變黃色
請見： .card-zoom-hover 的code
問題一：為什麼 .card-zoom-hover 加在 .card 同層會沒有 transform: scale; 的效果？（如卡片2，只有陰影出現但是卡片沒有 scale）
是因為 aos 的關係讓 transform 無效嗎？還是卡片內有偽元素 .stretched-link 的關係導致 transform 無效？（這個部分不知道怎麼除錯）
問題二：為解決第一個問題，我在 卡片1 的外層用 div.card-zoom-hover 包住整個 card，卡片才成功出現 scale 的效果。但是這時候就吃不到 :hover {background-color:$primary} 的樣式。請問要怎麼調整才會同時產生卡片 scale + 背景顏色變 $primary 的效果？
附上 pages，謝謝助教！

> 助教回覆：
> 回答一：
> 跟 aos 衝突了
> 回答二：
> 有變色，只是在後面，你看不到，建議在 .card-body 新增變色特效

---

6. 沈依蓉
助教好:
repo: https://github.com/lily-oa/yoga_local
pages: https://lily-oa.github.io/yoga_local/
主要code的頁面:
html:
https://github.com/lily-oa/yoga_local/blob/master/reservation-choose.html#:~:text=secondary rounded-16-,aHover,-“>
_until.scss:
https://github.com/lily-oa/yoga_local/blob/master/scss/setting/_until.scss#:~:text=粗框hover-,.aHover{,},-//特殊顏色
我想要做出hover時會有粗框的效果，有使用之前助教教的，先在要下框線的位置下一個透明框線的語法(transparent)，但發現我原本有的框線的位置會被透明框線覆蓋，要怎麼改才行？

> 助教回覆：
試試看，不要用透明框線，用原本的框線顏色，然後 hover 加粗（4px） 並更改顏色即可

---

7. 鉦勝
助教你好
Repo / pages
問題:當載入vanillajs-datepicker套件造成Swiper無法執行，
我把vanillajs-datepicker的js註解，swiper又正常執行

> 助教回覆：我試著將你的 code 載下來，並打開你的 datepicker 註解，嘗試了一下 隨機一個 swiper 但沒有什麼異常，可以描述詳細一點，例如哪一頁的 swiper 發生異常的點是什麼等等～～
> 可以嘗試重新開啟 vscode 看看

---

8. Gui
助教您好，想請問我透過 Bootstrap 調整間距的 key，編譯後也能正常生成 class，但是我發現套用到 HTML 後，卻是無效的（甚至是我用檢查發現是根本沒套用到），想請問助教是什麼原因。謝謝～

> 助教回覆：
> 需要同學的 repo 和 page 哩～～
> 我通靈看看，兩個猜測
> 1. all.scss 載入順序
> 2. $spacers 不能設定 .5 只能整數
但還是需要同學的 repo 和 page 才能 debug~~

---

9. 童筱涵
助教你好，想請問有關datepicker使用問題，在每日任務有成功做出來但在第八週作業跑不出來:smiling_face_with_tear:不知道是不是載入出了問題～
repo:https://github.com/judytung/week8-2
page:https://judytung.github.io/week8-2/reservation-2.html

> 助教回覆：
> 找不到元素，可以看看是不是命名有錯

:::danger
Uncaught TypeError: Cannot read property 'addEventListener' of null
:::


if (firstBtn) {
  firstBtn.addEventListener("click", (e) => {
    e.preventDefault();
    shortPlan.classList.add("d-none");
    longPlan.classList.add("d-none");
    // firstPlan.classList.add('border-4');
  });
}

---

10. 沈依蓉
助教好:
repo: https://github.com/lily-oa/L8-yoga
pages: https://lily-oa.github.io/L8-yoga/
問題頁面:
repo: https://github.com/lily-oa/L8-yoga/blob/master/app/components/footer.ejs 、https://github.com/lily-oa/L8-yoga/blob/master/app/reservation-choose.html
pages:http://localhost:8080/reservation-choose.html
我找不出“立即預約“的footer區塊為什麼不是滿版的錯誤，其它頁面都沒問題，只有reservation-choose.html這個頁面的footer不是滿版，要如何才能修好它？

> 助教回覆： 將 footer 移出 .container 外

---

11. Gui
助教您好，已收到助教的回覆。基本上就是不能整數的問題了 QQ（因為其餘一切正常，僅小數點部分不行。）
想問助教如果遇到已經制定好間距，但發現漏掉少數幾個部份了，會建議間距 key 整個打掉重來還是額外設定呢，謝謝助教 QQ
雖然大致上知道可能原因是什麼，但還是附上 repo 與 page，謝謝助教：）

> 助教回覆：
> 兩個方法：
> 1. 鐵下心慢慢改，一邊提醒自己下次不能漏掉
> 2. 另外定義但不與原本的邏輯相同
> 例如：

.track-section { padding: 36px } (o)
.p-36 (x)

---

12. Fred Chang
助教好,
這是我的repo、pages，想請問index.html的第174~176行，我的文字在本地執行的時候會偏上，但推上github pages時又會變成偏下，導致一直沒辦法和箭頭垂直置中，想請問是什麼原因以及如何修正，謝謝。
另外我banner的兩個按鈕也是在本地端看文字也是明顯偏上，但在github pages有正確置中，感覺是一樣的問題，但不曉得原因，感協助教~

> 助教回覆：同學你好，目前助教們測試的結果都不相同，初判是系統和瀏覽器版本差異，所以渲染上會不同，可以不調整這塊哩～～