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

# 8/18 線上 Slack 助教

## 今日助教輪班時間

Hong di Chen：8/18 (三)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

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

## 注意

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

## 問題

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

---

2. zyc
助教你好，
想請問關於 modal 的問題。
目前只有在 layout.ejs 把modal內容做出來，_layout.scss 內並沒有設定他的樣式。
但是在點擊右上角icon的時候modal卻沒有成功顯示，只有出現 modal-backdrop。請問是什麼原因導致modal無法顯示？謝謝
**我的理解是在要被觸發的 a 連結加入 data-bs-toggle="modal" data-bs-target="#cartFixedModal"然後 div.modal 加入 id="cartFixedModal"，預期成功顯示之後，才來細修modal樣式。但現在要先修正無法顯示的問題@@
附上 repo，pages

> 助教回覆： 這裡先建議同學 將整個 modal 移出 header 外獨立，若仍是不行可以再次回報
> 以下是我試過移出後的結果

> 移到 header 外

---

3. Phoebe
助教好，想請教一個問題。
在第五週作業左邊的Bar呈現上下且中間有空間，已經在外層下了justify-content-between，但是下半部份的人物資訊似乎直接播被推出去了? 想請問如何改善這個狀況，謝謝你。

> 助教回覆： min-height: 100vh; 不是 1000vh 喔～～

---

4. roger
助教你好，想請問助教有關ejs的問題，
我在layout.ejs檔案的class裡面嵌入了display語法(因為某些layout不想再購物車頁和付款頁中出現)，雖然在購物車頁有成功隱藏layout，但是我在終端機都會看到此錯誤，以至於無法gulp build，還請助教幫忙解惑，感謝
因為錯誤我連本地端的gulp有開啟不了，所以我也無法推上GitHub pages

> 助教回覆：
> ```
>class = "container <%= 'display' %>"
> ```
---

5. Fred Chang
助教您好,
這是我的Repo, 想請教:
我在修改_variables.scss內的變數後並儲存後，需要再儲存一次all.scss，我改的變數才會生效是正常的嗎?
關於字型，在_variables.scss的第422行設定

$font-family-sans-serif: Roboto, "Noto Sans" 

只要是英文字就會先抓到Roboto，中文就會抓到Noto sans對嗎? 目前認知是這邊設定之後，只要再另外給予font-weight或font-style，不需要再另外設定font-family，不曉得理解正不正確。
如圖，若我想使用fs-1, fs-2等bootstrap的class是改450行還是460行的地方呢? 然後如果我不想要h1~h6標籤有預設字體大小是否將前面的$h1-6拿掉即可? 謝謝~

> 助教回覆：
> 1.
> 不用，如果你是用 live SCSS ， all.scss 會監聽有修改過的檔案
> 2.
> font-family 可以設定一種字體或多種不同的字體，會從左邊第一個字體開始判斷，如果沒有對應的字體，就直接採用下一種字體，所你的理解是正確的～～
> 3.
> 雖然沒有圖，我大概猜一下，你是問 _variable.scss 吧～ 可以在 460 行附近，全改成 1 ，或是把 後面的數字刪掉也等於 x 1 的意思

$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;

> 下面這樣

$h1-font-size: $font-size-base * 1 !default;
$h2-font-size: $font-size-base * 1 !default;
$h3-font-size: $font-size-base * 1 !default;
$h4-font-size: $font-size-base * 1
!default;
$h5-font-size: $font-size-base * 1 !default;
$h6-font-size: $font-size-base !default;

---

6. zyc
Cuboid助教，看到您上午的回覆了，我晚點來試試!!
不過現在結帳頁面出現一個問題：
我在手機版的 li 設定 d-md-none ，並在 md 版的 li 設定 d-none d-md-block ，md 版 li 的內容就消失了，請問為什麼會這樣？
附上 md 版的 code、手機版的code、結帳頁面 confirmation.scss 以及 pages，再麻煩助教了，感謝！

> 助教回覆：
> 沒有消失，只是你設定 高度 84px ，還有設置 display-md-block 讓 .row 預設的 display: flex 失效，所以資訊區塊下移造成高度超過 84px，外加 overflow: hidden; 所以被 hidden 掉了
將 height 和 overflow 刪掉，就出來了

>建議不能把高度寫死

---
7. Jiang V
@cuboid 助教您好，我想請教 checkinfo 這個頁面的 button 高度無法對齊的問題，請問程式碼需要怎麼調整，左邊button才能跟右邊button高度一樣並且對齊底部呢 ? 這是我的 repo / gh-pages 再麻煩助教解惑，感謝！

> 助教回覆：

.row{
    align-items: flex-end;
}

---

8. 粘勝凱
助教您好，想請問中間的區塊，該怎麼寫才能在寬度375px以下時，讓字顯示在圖片上

> 助教回覆：
> 絕對定位定在圖片中間即可

---