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

# 8/19 線上 Slack 助教

## 今日助教輪班時間

焦糖：8/19 (四)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

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

## 注意

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

## 問題

1. kent：

>助教回覆：因為 Bootstrap reset 會把 ul, ol 的樣式拿，因此把樣式把上去就好了。

.ck-content ul {
  list-style: disc;
}
.ck-content ol {
  list-style: decimal;
}

---
2. Gill：

1.我想在disign.html的圖片上進行hover的效果，我想使用偽元素將滑鼠滑至照片時，偽元素會有半透明的效果，但偽元素(.designInfo-img-hover-scale::before)一值沒有辦法占滿整個圖片(圖一)，不知道會是甚麼原因呢?

2.在Cart List的部分會因為螢幕的大小而看不到底下的modal-footer(圖二)，想請問助教要如何做修改比較好？

>助教回覆：
>1. .designInfo-img-hover-scale::before { height: 100% } 是指這個偽元素區塊整體的高度，並不是圖片的高度。因此這裡可以[參考此做法](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade)，或是你也可以寫死圖片跟 ::before 的高度，例如都把 height 換成 350px。

>2. 這裡建議把 .modal-body 的 min-height 調整一下。不然當高度固定，外層 y 軸又是固定的情況下是沒有辦法看到底下的。（高度可以設為 548px 就好）

---

3. Peggy Tsai：

焦糖助教您好 附上我的pages &repo 想請教以下問題 下圖藍色問號的地方我想讓它垂直置中 但我寫.justify-content-center .align-items-center 在div class裡面都沒有產生效果 是不是不應該是這樣用 在麻煩您解惑 謝謝

>助教回覆：這個只要在 .ticket 加上 .p-0 就可以囉，[如圖](https://imgur.com/a/lLMH19A)。

---

4. zyc：

焦糖助教你好，參考同學的作業有一個疑惑。
我的理解是：一個 row 下方的 col 總數只能是 12、col 下方可以再包 row，這樣又有 col-12 的格線可以分配。
問題1）為什麼這位同學的 row 下面的 col 可以超過 12，還能夠左右並排呢？謝謝

>助教回覆：這裡你是指 col-md-10、col-md-4 對嗎？ 它在解析度 992px 以下時是沒有並排的唷，如[圖片](https://imgur.com/a/n6blDGi)。至於在 992px 以上可以並排是因為他有設一個 col-lg-8 的關係，另外一個沒有設就是自動分配剩餘寬度。

---

5. Karen Huang：

助教你好，這是我的 repo & page
想請問在訂閱分享的email 這個區塊，我查詢dev tool 似乎是因為 d-flex的關係，所以這個填寫email 的 input會自動向左右延展。
但我很想知道，該如何去控制這個input的寬度，使他跟設計稿一樣寬？除了在.subscribeBtnGroup寫死寬度，是否還有其他好方法呢？（因為我有用格線系統來寫過這一塊，發現訂閱按鈕會被擠壓、變形）
謝謝助教～

8/19 13:37 更新：但我比較好奇的是，因為.input-group是BS5本身寫的class，為什麼需要把它拿掉呢？所以我們在用BS5的時候是純粹抓他寫好的結構來用是嗎？因為class上面好像也是會吃到一些BS5原先寫的一些樣式，要拿掉.input-group也是因為不要BS5預設寫的那些樣式嗎？（也就是說在用其他BS5 components 的時候，也都是這種概念囉@@? （謝謝助教）

8/19 14:55 更新：剛有將input-group拿掉，但會使得input & btn 兩個相貼到的邊會不齊，看起來不是很美觀XDD，而且會需要另外再對input & btn各自寫border-radius...感覺拿input-group會需要寫更多東西@@

8/20 12:41 更新：有再回去BS5查看input-group的元件，好像共通點就是寬度都會佔滿版，所以想請教的第一個問題是：可能是因為他原先特性就是如此，難怪我改不掉是嗎XD。

所以助教你的意思要我拿掉.input-group不是要我修改這個套件，而是建議我手刻的意思嗎？XD 因為昨天我以為你是要我，一樣用這個元件，但把.input-group這個class拿掉而已，可是發現這樣改下去，好像更多要改的，還不如原本就直接手刻...。(這是我第二個問題)

然後兩份作業我都有看了，發現用input-group的那一位同學，必須用格線系統來控制input-group的寬度，看起來input-group要控制寬度似乎就只有這樣了嗎！所以最後一個問題：我很好奇的是，如果要用BS5的元件來做這個訂閱及填寫email的按鈕，助教你認為在BS5有更好用的元件嗎？或這邊你其實就會直接手刻XD。

以上三個問題感謝助教！！

>助教回覆：會建議移除 .subscribeBtnGroup 上面的 width: 350px;，直接對 input 下寬度就好，另外 .input-group 也要移除，直接下 d-flex 就可以囉。

延續說明：

>這裡要先有一個認知，BS 雖然有提供許多元件，很方便快速沒錯。但是當需求與元件不符合的時候，就會建議自己手刻，盡量不要去更改元件原本預設的東西( 當然你也是可以強迫更改元件，但就是做到最後會很亂 XD)。像是[這一份作業](https://bingbingboom.github.io/hexschool-2021-webLayout-exhibinection/)，就是沒有用到 .input-group。那如果要使用 .input-group 來製作的話，這裡提供[這一份作業](https://jasonlu0525.github.io/art/)給你參考，有利用到格線系統的方式來製作。有任何不懂的地方也歡迎再次詢問唷 ~

>8/20 13:00 補充說明：
>對的沒有錯，就是因為 BS 的 .input-group 寬度都是滿版的關係，因此才會推薦用手刻的方式。( 就是不要使用 BS 任何的 Form controls 元件 >< 也不要強制修改元件 ) 如果要使用元件，就只好在外層利用格線系統來限制它的寬度，而不是修改元件預設的寬度。我覺得沒有其他元件可以用了 XD，只能利用 Form controls + Gird 才能符合它的需求 ( 不改預設元件的情況下 )。我的話會直接手刻，雖然比較麻煩，但這樣我比較好調整，也比較知道這一段裡面塞了什麼內容。

---

6. ZOE WU：
問題 1.
在寫 nav-scroller 發現這個區塊會跟其他區塊重疊在一起，想請問這是什麼原因造成的？
我目前的處理是，由下方區塊（熱門特展）往上推 mt-13，讓熱門特展區塊不要跟 nav-scroller 重疊到。
再請助教協助釐清問題～感謝

問題 2.
想請問助教 variable.scss font-size 的部分，h1~h6 該如何設定與運用？
不太理解下方兩者的用法與差別：

【14:50 延續詢問】：

問題 3.
想接續請問助教關於 nav-scroller 的部分，目前如果介面縮成 mobile 規格觀看，navbar 似乎無法捲動，請問這個部分有辦法解決嗎？

問題 4.
請問助教 week6 主線任務這次有一個字體 "Noto Sans CJK TC" 是要先下載字體再設定套用嗎？不太確定字體下載的情況如何引用？字體檔案要如何設定或放在哪個資料夾中嗎？

再麻煩助教回覆，謝謝！

>助教回覆：

1.原因是你的 .nav-scroller 寫在 .header 裡面。而 .header 又有寫死高度，所以才會造成這個問題。建議把 .nav-scroller 移出 .header 寫在外面就好了。

2.這個可以直接在標籤加上 class="fs-1" 來改變字體大小唷，可以[參考官網](https://getbootstrap.com/docs/5.0/utilities/text/)。

延續問題：

3.我這邊看是可以滾動的欸(?)，如[影片](https://www.awesomescreenshot.com/video/4912021)。可否再詳細說明，或是錄製影片呢 ?

4.這個建議直接利用 [Google Fonts](https://www.webdesigntooler.com/google-fonts) 找到 Noto Sans TC 來匯入就可以了。

---

7. Sec：

助教好, 请问关于 cart list 的弹跳视窗

在视窗内的 btn 颜色 变成黑色背景的，btn 是否自定义还是用回 btn-outline-secondary?

在我的 code 内下面的 小计NT$1050 和 btn 部分是使用 position-absolute 和 bottom-0 但是会出现问题就是 超出了, 是不是应该用 position 定位在下面呢

>助教回覆：

1.這個使用 .btn-outline-secondary 就可以了。

2.這裡不要使用「絕對定位」的方式，因為這樣會很容易造成跑版，且這裡也不適合。這裡可以善用 d-flex、flex-column、justify-content-between 的方式讓「小計與 $1050」這一個區塊在底下唷。