---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/11 線上 Slack 助教
## 今日助教輪班時間
焦糖：8/11 (三)
回覆時間：上午 9:00 - 下午 1:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1. 鉦勝：
助教你好，想請問bootstrap內的h1~h6的字體大小設定我已經有在我已經有在
_variables.scss修改尺寸了
但是它有一個rfs的設定，隨著視窗大小下，你設定的尺寸會略為縮小
這樣的話，文字大小不就沒辦法達到你要的效果
還是說有辦法取消掉rfs的設定?
這是我的GitHub repo、Pages
> 助教回覆： 可以在 _variables.scss 裡面的 $enable-rfs: true !default; --> 改成 $enable-rfs: false !default; 就可以關閉了。
---
2. 群嘉：
請問文字的大小可以設斷點嗎?自己有嘗試設文字斷點但是失敗了 h4-md h3,這樣子寫h4-md會沒有效果，那遇到文字斷點該怎麼辦? 還是只能用min-width XXXpx 慢慢設定嗎?
> 助教回覆： 要麻煩你提供檔案給我檢查唷 ~ 不然我不太清楚是哪裡出現失敗錯誤。
---
3. Sec：
助教好，已根据你昨天的建议从 a 标签转换成 button, header 的 icon 还是 30.5 - 31.5px, navbar 有把宽度移除了, 改用 padding 但是看起来好像比设计稿宅很多
> 助教回覆：這裡依照我[圖片](https://imgur.com/a/5zyL5Wb)的方式修改，就可以變成寬高 24px 了，你再試試看。
---
4. Phoebe：
助教好，這是我的repo，pages。
想請問，下方圖右邊的flex空間該如何在768的時候去除呢?
才可以達到圖片滿版的狀況，謝謝助教。
> 助教回覆：可以在 img 標籤與外層 div 都加上 width: 100% 就可以滿版囉！如[圖片](https://imgur.com/a/DSER2Br)。
---
5. lumei：
助教好，這是我的repo和pages
想請問，在index.scss裡關於background-image的問題，我從github上下載的圖片放到images資料夾載入，為什麼畫面會和從網址的載入方式有差異呢，有確認過路徑，在vscode裡追蹤連結勢可以看到圖片的，但不知道為什麼就是不會顯示，附上成功的程式碼和失敗的程式碼畫面
> 助教回覆：background 的路徑不對唷 --> 正確是 background: url(". ./images/index-banner.jpg")no-repeat center center;。因為你的 layout.ejs 是 import all.scss 這支檔案，所以要以 all.scss 來調整路徑唷。
---
6. YELLA MOON：
助教您好，
我對boostrap很不熟悉，
在layout.ejs
１．20行 h4 為何用$primary無法正確顯示主色
２．２３行，我無法讓sign in 靠右邊，嘗試了很多次。
３．４５行，想請問我的button購買票卷，一直無法做成正常的樣子單行高。
４．檔案_index.scss我設定了.first 裡面圖片我作成background-image但是失敗了，想請問@焦糖 助教能不能教我一下，這些感覺很簡單。但是我一直失敗，有種生無可戀的感覺。
> 助教回覆：
> 1. 若要使用你修改的 $primary 的話，要把 $primary --> 改成 link-primary 才對唷！可以參考 [Colored links](https://getbootstrap.com/docs/5.0/helpers/colored-links/)。
>
>2. 首先 .row 的底下一定是接 .col，因此這邊你用錯了，可以參考 [Grid system](https://getbootstrap.com/docs/5.0/layout/grid/)。接著依照[圖片](https://imgur.com/a/6Djm7Sc)來修改，就可以向右邊推擠囉！
>
>3. 可以參考[圖片](https://imgur.com/a/dOUCkO4)來修改，這樣 icon 的寬高都是 24px 跟設計稿一樣。
>
>4. 可以參考[圖片](https://imgur.com/a/vbClMQt)，我都有加上說明，可以先參考來修改喔 ~
若有不熟悉的地方可以先參考 Bootstrap 的官網來做，上面都有範例。
---
7. Sec：
助教好, 想请问几个问题
1.在首页 "直播回顾" 的部分我有照着设计稿放 col-lg-5, padding, 文字大小， line-height, margin-bottom等都有跟着设计稿来调整, 但是在段落的部分我做出来的效果是 2 行, 而设计稿的是 3 行, 是不是应该使用 br 标签来换行?
2.首页 "热门特展" 的日期和 facebook icon 是透过 flex direction 来进行上下对齐, 但是跟设计稿的不一样，不懂是不是应该要下 margin-bottom?
3.header下的 "台北當代藝術展" banner 文字垂直之中我用 padding 撑开是否正确, footer 的 banner 则是透过在 .container 设置 h-100, position-relative 的方式来置中, 不懂这2个方法哪一个为正确?
> 助教回覆：
> 1.這裡我在解析度 1280px 看是三行的沒有錯喔！因為設計稿的寬度是 1280px，所以你是沒問題的。
>
> 2.你的方法是沒有問題的，會感覺奇怪是因為設計圖整個區塊的高度是 350px，而不是 316px，可以在 .home-exhibition-content-buttons 把 margin-top 修改為 68px，看起來會好很多。
>
>3.這二塊其實會建議都使用 d-flex + container 來讓區塊置中或是靠下，使用太大的 padding 數值或是絕對定位的方式都很容易造成跑版。
---
8. zyc：
焦糖助教你好，
有一個問題：請問為什麼 h1 設定 position:absolute top-50 start-50 translate-middle 卻無法對齊父層 position:relative 的中間線？
附上 layout.html 和 gh-page，再麻煩你了!! 單單寫一個 header 花了一個早上還寫不出乃，我也生無可戀
> 助教回覆：原因是字體的行高也會產生高度，可以在 h1 標籤上補上 line-height: 0px 就會發現整體會往上一點點，然後 a 標籤也要加上 display: block 的設定。最後在 ul 標籤加上 align-items: center 就可以對齊囉！[如圖](https://imgur.com/a/sB9lsuM)。( 但其實這裡不推薦用定位的方式來做，可以嘗試使用 d-flex + justify-content-space-between )
---
9. Jiang V：
助教您好，我預期在首頁 swiper 區塊有六個項目滑動，但滑到第三個與第四個中間時，有一個大間距，請問這要怎麼樣調整呢 ? 這是我的 repo / gh-pages 再請助教協助，謝謝
> 助教回覆：這裡可以參考[圖片](https://imgur.com/a/sB9lsuM)，把 width: 255px --> 修改成 width: 100% 就解決囉 ~\
---
10. Jiang V：
助教您好，延續剛才的問題，現在發現第四個card跑出container了，要怎麼將card保持在container裡面，這是我的 repo / gh-pages 再請助教協助，謝謝助教
> 助教回覆：目前我這邊檢查是有在 .container 的寬度內的耶，如[圖片](https://imgur.com/a/yqEstWX)。可否再詳細說明是在哪一個頁面呢 ? 或是你自己有先修改了 ~
---
11. Phoebe：
助教好，延續前一個問題，repo/page
1.想要將紅字置中在圖片中央(如下圖)，使用了position :absolute來進行定位，但是使用top:50%的時候卻無法看見文字，想請問該如何解決~
2.在伸縮頁面的時候，圖片會有一種跟著跑的感覺，想請問該如何解決~
3.在頁面最下方的"確認送出"按鈕，我在button的地方使用margin:0 auto，期待它會置中，但是它沒有將button置中，想請問該如何解決~
感謝助教:懇求的臉: (已編輯)
> 助教回覆：
1. 因為你沒有對外層的 li 下 position: relative;，所以 top: 50% 會以整個頁面的寬高當作外層，才會不知道跑到哪裡去了。
2. 這裡你是指哪個區塊的圖片呢，可否再詳細說明一下。如果是圖片會跟著解析度縮放的意思，可能是圖片有加上 width: 100%，沒寫死寬度的關係。
3. 這裡要對 button 加上 display: block; 改成區塊屬性，margin 0 auto 才會有效唷。
---
12. 軒仔：
助教好，
我用bs5的pagination組件製作，左右按鈕使用material的icon，但icon會使pagination的大小呈現不一致
我的codepen：https://codepen.io/loking23/pen/zYweKBR
> 助教回覆：這裡可以在 .page-link 加上 width 與 height 唷。
---
13. 格可：
https://hackmd.io/Iaxc756ESRCNtOizGtbdtQ
助教您好，想請教周一的每日任務關於斷點的設定。
lg的那個斷點代表的意思是手機板的嗎?但是我看官網寫的是992px。還是我搞錯什麼了?謝謝
> 助教回覆：col-lg 通常指的是電腦版喔，因此你可以看到 col-lg-3*4 也就是解析度 >= 992px 時，採用四欄式的排版。
---
14. 黃羽均：
助教您好，我想再問一下
為什麼我的 index裡面
<input type="submit" value="確認送出">
這個下margin 0 auto
沒有辦法讓它置中呢
page:https://huang-yu-jun.github.io/glasses-website/
https://github.com/huang-yu-jun/glasses-website/tree/gh-pages
> 助教回覆：我這邊看已經有置中了欸(?)，若下 margin: 0 auto 沒有效果可能是因為沒有加上 display: block 的關係。
---
15. Jiang V：
助教您好，我想請問 popular 區塊 為什麼會重疊了？ 要怎麼調整程式碼呢 ? 這是我的 repo / gh-pages
> 助教回覆：這裡因為對圖片下 max-width: 350px 寫死寬度的關係，建議移除所有的 max-width 並使用 width: 100% 讓圖片隨著解析度自適應就好，如[圖片](https://imgur.com/a/lFjsWMT)。
---
16. Karen Huang：
助教好，這是我的repo & page
第一個問題
我想問的是，設計稿在assignment 的左邊有一條綠線，應該怎樣才能做得出來？因為我在li上面下偽元素，可是看起來那條線應該是在ul上的，然後我是使用套件來寫這個nav的
第二個問題是，我想問assignment 頁面需要寫container嗎？
container 是否是在有RWD的時候才需使用啊？
謝謝 (已編輯)
> 助教回覆：
1. 這裡會先把 header 的 .ps-8 移除，接著會在 .assignment .material-icons 加上 padding 來做推擠，如[圖片](https://imgur.com/a/4YtTZZR)。另外因為 .header .ps-8 移除的關係，.logo 與 .user 的距離都要重新做調整。
2. 第五週不會使用到 .container，第六週做 RWD 響應式就會使用到囉 ~
---
17. Phoebe：
助教好，又延續上面 repo/page~
想請問這個blur(下圖)我預期它是會跟img一樣大(330x278)，想請問為什麼blur會整個突出去呢? (已編輯)
> 助教回覆：原因是你在 .joint-content img 下了 padding: 0px 0 20px 0; 關係，所以圖片實際的高度是 278px - 20px = 258px，因此不是遮罩突出去，而是你的圖片被擠壓了 20px。解決的辦法是先移除 padding: 0px 0 20px 0; 並在 .joint-content-left 加上 margin-bottom: 20px 就可以了。[如圖](https://imgur.com/a/cULKeu0)
Sign in with Wallet
Connect another wallet