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

# 8/24 線上 Slack 助教

## 今日助教輪班時間

Keng Wei Chu：8/24 (二)
回覆時間：下午 1:00 -下午 5:00

## 發問規範

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

## 注意

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

## 問題

1. Karen Huang：
助教您好，這是我的 page & repo，以下有四個問題想問～～
* offcanvas 如果沒有寫padding top 我的cart list這個文字會跑上去被navbar蓋住，因此用padding top的方式推，是否可行？或有更好的方法呢？
* 很想知道為什麼在event.html這一頁裡，第56行的input如果我沒有寫寬度，他會變成好像是滿版一樣，必須要寫寬度來控制他的寬？是否有其他方式可以控制他的寬度？（因為我的input也不是BS5 component，是我自己手寫的）
* utilities.scss這支檔案裡面，我把一些跟RWD斷點設定有關的內容放進來，以及把跟文字設定設定相關的小東西也放進來，不曉得這樣是否合適？或者是跟文字設定有關的東西可以考慮統一開一個typography.scss放入呢？
* 關於img的寬高，在寫的時候，我都會在img上面加object-fit: cover; 但在寫這網站時，因為圖片大小不一，所以通常img上都要設定高度，變成我無法統一在base.scss上面的img加入object-fit: cover; 就好，我還是必須要在每一個img上面都幫他寫特定的高度，所以因為是每次遇到的狀況都不同，我想問的是，助教在寫img的時候都怎麼減少code? 另外想問的是，如果每一次img都要寫高度，那當我不想要有page的scss時，這些img設定應該放去哪比較好？（昨天有問到助教說，background-image可以在base資料夾內開一個跟typography.scss一樣的background.scss，但像img這類應該歸到哪一支scss好呢？
> 助教回覆：
Q1. 可以的
Q2. 如果使用 input 另外設定寬度即可
Q3. 可以放到針對文字排版的 typography.scss 中統一管理喔
Q4. 需要設定寬度的地方是躲不掉的，因為每個頁面圖片寬度可能會不同，我是設定在各個頁面
如果真的不想寫在 pages 中，你就另外創的 scss 吧，但建議是直接寫在各 page 的 scss 中
---
2. 袁祥恩
助教您好～有關於 gulp 的問題詢問，前面上傳都 ok， 但是不知道為什麼到最後 gulp deploy 顯示 error
github repo 網址：https://github.com/Shawn-en-Yuan/RWD-week6
> 助教回覆：這邊有幫你測試過檔案本身沒問題
在其他可能的狀況第七點有提到類似的狀況
A: 這邊請麻煩刪除隱藏的資料夾「.publish」再重新 gulp deploy 就可以囉。
這種狀況通常發生在操作流程上可能不正確導致錯誤，因此打開「.publish」的時候會看到未編譯後的 Gulp 原始碼，正確來講該資料夾底下只會有編譯後的原始碼，如果刪除「.publish」之後狀況還是沒改善，那麼建議刪除「dist」資料夾並重新輸入 gulp build → gulp deploy 即可。
再幫我看看你有沒有出現 .publish，或是砍掉原本的 repositories 再重新按照流程上傳試試
---
3. 蔡明達
[Repo](https://github.com/JackTsai890405/Week8)
[Pages](https://jacktsai890405.github.io/Week8/contactUs.html)
* 意見回饋與問題詢問在手機板時，背景色會完全覆蓋此區塊（正常來說希望是可以留左右 Padding 的空間）
* 意見回饋與問題詢問在 PC 板時，左右兩區塊應該是需要保留 30px 的間隔，但右邊區塊把原有的 Padding 覆蓋掉了
* Contact Us 頁面在電腦板時，左右區塊希望可以等高，右邊去塊嘗試用 flex-grow、flex-shrink、flex-basis，遲遲無法成功
>Q1.Q2.Q3. 這邊幫我修正成這樣
gutter、padding 再自行調整
Q3. 在 form 下 h-100 讓 form 的高度跟框架一樣高即可
這邊觀看設計稿為
---
4. zyc
耕緯助教你好，附上 [pages](https://zyan-c.github.io/doyoga/)。
1）為什麼新增的顏色變數無效？我的做法是直接在變數檔案內新增自訂義的顏色，請見 _variables.scss code。例如： index 的 row 採用了 .text-dark 這個變數，預期底下的 p、h1、h2...顏色都會吃到自定義的 #907A7B，但使用 dev tool 檢檢查時好像被 BS 的通用類別覆蓋了，自己設定的變數值並沒有出來。為什麼會這樣呢？
2）為什麼 col-12 col-md-6 col-lg-4 沒有加 w-100 的話，col-lg-4 在 lg 斷點以上的 input 會縮短（如圖）？請見 layout.ejs code 。
目前是用 w-100 來解決 input 縮短的問題。但是在 md 斷點的 col-md-6 會佔滿整行寬度，導致 跟設計稿不符。
3）如何確認瀏覽器有吃到字型思源黑體？
這次使用 adobe font，對方建議我將以下 code 貼到 html 的 head 內。但是使用 dev 檢視任何一個字體標籤時，帶到 font-family: var(--bs-font-sans-serif);，並沒有顯示“Source Han Sans Traditional”，請見 _variables.scss 設定 font-family 的 code，請問我要怎麼確認有吃到正確的字型呢？
4）為什麼圖片會被裁切... 請見 index.html code。
>Q1. 這邊用新變數叫做 \$primary-dark 所以你要使用 text-primary-dark 非 text-dark ，text-{$dark} 本身還是沒有改變，而 $dark 為 $gray-900 !default;
>Q2. 這邊跟你設定的 w-100 沒有關係，而是你外層的下了 d-lg-flex ，改成 d-md-flex 就可以在>= 768 時跟 h3 在同一行
>Q3. 
這邊 hover 或點擊都可以知道
Q4. 這邊可以在 img 外層使用 div 或是不採用 object-fit: cover; 改用 object-fit: contain;, 這邊圖片給的是裁切過後的建議使用後者
---
5. Sec
助教好，想请问第 8 周 form 的问题
在中间有设定 col-lg-4 但是 2 个 input 超过 col-lg-4 的宽度 , 有设定 d-flex 和 justify-content-between 但是不明白为什么还是 overflow
gh page : https://secyj.github.io/weblayout-week-8/appointment-form.html
code : https://github.com/SecYJ/weblayout-week-8
>這是 input 標籤的關係，這邊建議將包住 label、input 的 div 設定 50% 的寬度，input 再設定 100% 寬度(即外層 div 的寬度)即可
---
6. zyc
再確認一下修改color變數和map的流程，對於步驟三utilities的部分有疑問：
步驟一、在_variables.scss新增 theme-color 變數，並註解//new

// scss-docs-start theme-color-variables $primary: #F5F0E7 !default; //#00cc99; // $blue !default; 
$primary-dark: #907A7B !default; //new 
$primary-light: #C0A4A5 !default; //new 
$text-dark: #707070 !default; //new 
$white: #ffffff !default; //new 
$secondary: $gray-600 !default; 
$success: $green !default; 
$info: $cyan !default; 
$warning: $yellow !default; 
$danger: $red !default; 
$light: $gray-100 !default; 
$dark: $gray-900 !default; 
// scss-docs-end theme-color-variables

步驟二、將有註解//new的變數新增到_variables.scss的 theme-colors-map

"primary": $primary, 
"primary-dark": $primary-dark, //new 
"primary-light": $primary-light, //new 
"text-dark": $text-dark, //new 
"white": $white, //new 
"secondary": $secondary, 
"success": $success, 
"info": $info, 
"warning": $warning, 
"danger": $danger, 
"light": $light, 
"dark": $dark ) !default;

然後就可以獲得 text-* 和 bg-* 的 class。（$theme-colors內有 “” 的都可以結合 text-* 和 bg-* 來變成新的 class對嗎）
步驟三、 是否需要手動新增在map新增的變數？還是會自動帶入？這裏 BS 原始 code 出現的好像不是 theme-colors-map 裡面出現的變數。
>Q1. 是的
>Q2. 裡面的 class: text, values:$theme-colors 就是結合在 variables.scss 中所定義的變數 $theme-colors 產生出 class 名稱 text-primary、text-primary-dark 等
---
7. Sec
助教好，看了你的回复吧 input 和 父层的 width 改了就没问题了，但是不明白 2个 input 都是inline-block 竟然会超出..
>inline-block 本身不會超出你的 div ，input 本身比較特別寬度的部分會另外設定(前幾週作業應該都有遇到)，有興趣可以參考[這邊](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)
---
8. 周周
助教您好~
這是我的 [repo](https://github.com/JHOUJHOU/yogawebtask) ，[page](https://jhoujhou.github.io/yogawebtask/)
1 我在index.html 第127行有寫google icon ，但不會正常顯示出來。
2 我在helpers.scss中寫CSS樣式，如果套用在程式裡，gulp會說有編譯錯誤，不知道這裡面有那裏寫錯?
想請問助教問題出那裏? 感謝助教:grinning:
>Q1. 請拿掉 outlined，使用 material-icons 即可
>Q2. @include media-breakpoint-up 要在某個 class 底下使用這個斷點
---