---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/10 線上 Slack 助教
## 今日助教輪班時間
Hong di Chen：8/10 (二)
回覆時間：下午 2:00 -下午 6:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1. 穎旻：
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？
> 助教回覆： 因為在....所以..，於是產生 ... 的結果
---
2. 周周:
助教您好~~
這是我的GitHub repo、Pages，
原本在第20行下justify-content-between讓兩邊可以靠兩邊對齊，但沒有對齊，以及左邊的背景顏色高度沒有占滿整，想請問助教問題出在那裏?
> 助教回覆： 高度設定 height: 100vh; 問題出在你現在的高度是由內容撐起來的，會依照子元素的總高度自適應
---
3. 沈依蓉
助教您好:
Repo:https://lily-oa.github.io/local_art/
pages: https://lily-oa.github.io/local_art/
scss檔: https://github.com/lily-oa/local_art/blob/master/scss/layout/_navbarDown.scss
html檔: https://github.com/lily-oa/local_art/blob/master/index.html
有兩個問題:
1.在做index.html裡的.navbarDown區塊時發現套用nav的元件後，斷點375時我的.nav-item的第一項項目音樂會被擠到最左邊去並且看不到它，請問要如何修正才行？
2.斷點375時我的.nav-item項目的文字都會變成直列式，與設計稿不符，設計稿是橫式的，請問要如何調整才行？
> 助教回覆：
> 1. 在手機時，將 .justify-content-center 拿掉
> 2. white-space: nowrap
---
4. 軒仔
助教好！
我在navbar裡面放一個drowpdown，我想要改nav-link的顏色，我知道可以去variable改nav-link的預設顏色，但我想問如果是不同nav需要使用不同顏色時要怎麼做修改，我有試過在標籤下link-dark，發現權重不夠改
我的codepen（24行下link-dark）:https://codepen.io/loking23/pen/jOmXwKW
> 助教回覆： 可以加 !important 強制覆蓋
```css=
.link-dark:focus, .link-dark:hover {
color: #1A1E23 !important;
}
```
---
5. Gill
老師助教同學們好，以下是我的pages、repo
想請問
1.在topNavBar部分(HTML的59-73行)已有加上卷軸的效果(header.scss的第19-28行)，但隨這著寬度的縮小，左側的文字會被吃掉無法使用卷軸看到，有看了今天的每日任務，但還是找不到問題點，再麻煩助教(如圖一)
2.輸入電子郵件的地方與訂閱的按鈕中間會有個間隔，不過沒有使用任何堆擠，用goole F12查看也沒有任何推擠，想請問是哪邊沒有注意到嗎?(HTML77-87行)(如圖二)
3.中間的banner在首頁時有顯示，在其他頁面只有EXHIBINECTION與項目的選單，不過將banner寫在layout.ejs的話，每個頁面皆會顯示，請問有什麼方式可以避免這個情況呢?(如圖三)
> 助教回覆：
> 1. 在手機時，將 .justify-content-center 拿掉
> 2. 訂閱按鈕需要 display: block;
> 3. 不要將 banner 寫在 layout.ejs ，只寫在 index.html 即可
---
6. Joy Cheng
助教你好，下面個別附上出現問題的codepen 網址
以下都是載入Bootstrap 5 cdn 時，出現的問題：
Codepen 中（前三張截圖），nav-link 的 a 標籤在放入icon 之後，會自己生成高度，檢查之後發現是a標籤自動生成的，所以也無法使用margin bottom 或是 padding bottom --0 清除格式，想知道這邊可以如何解決～ 謝謝助教
這邊Codepen 中（後兩張截圖），加.menu-list ul標籤加入 overflow屬性之後，右方自動生成一個灰色區域，但是不知道怎麼清除，有點不太確定生成的原因是什麼，再請助教協助，謝謝你～
> 助教回覆：
> 1. 在 span 設定 vertical-align: middle;
> 2. 我這邊打開 CodePen 沒有看到灰色區域，可以請同學提供給我更多細節
---
7. 蔡明達
助教您好
連結
- Repo
- Pages
問題
- checkout 頁面裡的 Progress Bar 字都會重疊在一起，想請助教協助！
- checkout 頁面右半邊的該如何去推擠，目前是使用 min-height + 自身推擠，不知道有沒有更好的做法，因為使用 min-height 不知道如何判斷高度要設多少？
- 首頁部分熱門特展無法像如下 XD 稿卡片的外部依然有背景顏色
- checkout 頁面於 320 px 有破版情形，想尋求助教協助
> 助教回覆：
> 1. 助教會使用 ul 列表，並設定 border-top 來實作上方的線，接著使用 偽類（li:before）來實作圓點
> 2. .checkout1-view 的 min-height
> 建議使用calc(100vh - 58px - 20px) 也就是減掉 58px 的 header 和 container 20px 剩下的是 checkout-1-view 的高度，再依照設計稿推小計那一塊的 margin-bottom
> 3. 在 li 設定 padding
> 4. 如果是到 320px 才破版的話，建議是可以不調整
因為現在比較常見的行動版斷點是 375px, 414px～
---
8. 阿瓜:speech_balloon:
各位老師助教同學好
想請教gulp問題,有時候gulp後、頁面會顯示Cannot GET
先前gulp後修改編輯樣式都是正常的顯示
該怎麼辦呢？
> 助教回覆：需要請同學提供 repo, gitGub Page 的網址喔，這樣我才能看到整體架構～～
> 目前只能依照那張圖片給的錯誤， 推論 ./app/layout.ejs 少了東西
---
9.Peggy Tsai
Cuboid助教您好
想請教在寫第五週作業時遇到的問題
附上連結:
Repo Page
1.Admin頁面: modal的 button裡面寫的內容會自己換行 不是像設計稿那樣會在同一行
2.Index頁面: list-group的margin設定不會根據我寫的變動 不知道是哪裡寫錯了 (edited)
> 助教回覆：
> 1.
> 助教這裡沒有換行，可以嘗試在 .adminBtn 設置display: flex; 和 align-items: center;
> 2. 你的 list-group的margin 是設置 0，所以不會變動
---
10. Sec
助教好, 关于第6周有几个问题想问
在 layout.ejs header 右边 signUp 旁边的 icon 在 a 标签宽高是24 * 24，但是它的父层高度却是 29.5 - 30.5px ( 我在那个 thread tag你了)
在 header signUp 旁边的 icon 有一个 3的数字, 设置了text-white 但是还是没有显示不懂是为什么
首页的 nav-bar 是不是要把 width: 65px 写死?
> 助教回覆：
> 1. 下面那個改完，還有發生，可以留言我隔天回
> 2. 建議寫成以下格式
```html=
<button
class="cart"
type="button"
>
<span class="material-icons"> confirmation_number </span>
<span class="count">3</span>
</button>
```
>3. 不用寫死，用 padding 撐開
---
11. 沈依蓉
助教您好: 我是今天的第二順位同學，程式碼已修改過並上傳，但發現.navbarDown_detail的第一個項目“音樂“還是會被推到最左邊並消失，請問該如何更改才對？
Repo:https://lily-oa.github.io/local_art/
pages: https://lily-oa.github.io/local_art/ (edited)
> 助教回覆：
> 建議這邊不要使用 .justify-content-center 因為有 !important 沒辦法覆蓋
> 在手機時改成 justify-content: unset;
> 或是參考每日任務
> https://codepen.io/Bingbingboom/pen/WNjRBrR?editors=1100
---
12. lumei
老師助教同學們好，這是我的 Codepen，想請問我偽元素方式有用錯嗎？我預期css第13行的content:"3" 會讓購物車上方出現3的字 但目前畫面並沒有出現
> 助教回覆： 那個 紅點 不建議使用 偽類，建議使用 span 標籤，絕對定位到 icon 上
---
13. 格可
助教好，有些問題想請教您:
https://codepen.io/catabo/pen/MWmPGmP
想請問部落格頁面底下的頁碼切換列表，怎麼推擠可以順利置中?我目前是指用左邊margin推、但是覺得好像不太平衡所以想問問看。還有想問怎麼讓上一頁、下一頁的灰色被景色用hover呈現?
2.然後這邊剛開始弄bs5，想問助教對初學者要快速知道有哪些class樣式可以使用 怎麼下手好?謝謝助教
> 助教回覆：
> 1.
```css=
.page-bar{
display: flex;
justify-content: center;
}
```
> 2.
```css=
.page-bar li a:hover {
background-color: gray;
}
```
> 3.
> 查看官方文件 六角學院有提供[中文版](https://bootstrap5.hexschool.com/?fbclid=IwAR3O-C0p7jBUGIe0__rcDpNlNNeg2-BQBMeMvATHaSW2T6HS5KUK40Fi5W0)
---
14. Jiang V
助教您好，我預期在 layout 的 swiper 有六個項目滑動，但是第四個項目跑到第二列了，該如何修正程式碼呢 ? 這是我的 repo 和 gh-pages 再請助教協助解惑，謝謝
> 助教回覆： 同學用 第三方套件 需按照其規則處理，如果用 row column 他就會自適應往下，建議可以自己寫結構，參考今日的每日任務，有異曲同工之妙～～
---
15. 鉦勝
助教你好
想請問bootstrap內的h1~h6的字體大小設定我已經有在我已經有在
_variables.scss修改尺寸了
但是它有一個rfs的設定，隨著視窗大小下，你設定的尺寸會略為縮小
這樣的話，文字大小不就沒辦法達到你要的效果
還是說有辦法取消掉rfs的設定?
> 助教回覆： 在 node_modules/bootstrap 底下找到 _variables.scss
> 將檔案內的 true 改成 false
```scss=
$enable-rfs: true !default;
```
```scss=
$enable-rfs: false !default;
```
---
16. 群嘉
請問文字的大小可以設斷點嗎?自己有嘗試設文字斷點但是失敗了 h4-md h3,這樣子寫h4-md會沒有效果，那遇到文字斷點該怎麼辦? 還是只能用min-width XXXpx 慢慢設定嗎?
> 助教回覆： 可以嘗試 [rfs](https://ithelp.ithome.com.tw/articles/10250837)
---
17. Sec
助教好，已根据你昨天的建议从 a 标签转换成 button, header 的 icon 还是 30.5 - 31.5px, navbar 有把宽度移除了, 改用 padding 但是看起来好像比设计稿宅很多
ghpage : https://secyj.github.io/weblayout-week-6/
code : https://github.com/SecYJ/weblayout-week-6/tree/master/app
> 助教回覆：
> 1.這樣就變 24px 24px 囉
```scss=
button{
padding: 0;
.material-icons{
vertical-align: bottom;
}
}
```
> 2.navbar 有把宽度移除了, 改用 padding 但是看起来好像比设计稿宅很多
> 助教不太了解差在哪，麻煩同學描述具體點～～
Sign in with Wallet
Connect another wallet