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

# 8/12 線上 Slack 助教

## 今日助教輪班時間

Bingbingboom：8/12 (四)
回覆時間：早上 9:00 - 下午 1:00

## 發問規範

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

## 注意

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

## 問題

1. **黃羽均：**
想請問一下，我的首頁
聯名設計鏡框的 double A+ 和 Youth 都有設定背景圖片但都沒有出來，覺得有點奇怪
再麻煩您過目一下
page: https://huang-yu-jun.github.io/glasses-website/
第 90 行
https://github.com/huang-yu-jun/glasses-website/blob/master/app/assets/style/_index.scss
同上 確認送出的按鈕
我有加上 margin : 0 auto
為什麼沒有辦法置中呢? 213 行
> 助教回覆：
> 1. [這邊](https://github.com/huang-yu-jun/glasses-website/blob/98f75471110fb839deff1b0e04eabdf660c34bef/app/assets/style/_index.scss#L105-L115) 可以觀看到同學的 CSS .pic1, .pic2 是寫在 li 內層，而 HTML 中 是在 li 同層，所以會吃不到背景圖片的設定哦 ~
> 2. 將確認送出按鈕的 input 設定為 display: block; 就可以哩 ~

---

2. **沈依蓉：**
早安助教!
請問我的首頁 banner 區塊，圖片無法呈現滿版，左右都會有空白，不知道為什麼？如何解決才好？
repo:https://github.com/lily-oa/local_art
pages: https://lily-oa.github.io/local_art/
> 助教回覆：
> 同學在 body 中設定了左右 padding 值哦，建議可以移除哩！在[這邊](https://github.com/lily-oa/local_art/blob/e9f8e918e2069d410daece74b2cf3b7e62c8b96b/scss/config/_base.scss#L5)

---

3. **Jiang V：**
薰云助教您好，我想請問熱門特區 img 多出來的空間要怎麼消除？另外在 pad 時，2020 台味設計展這個區塊後面有一個保留，這是怎麼產生的呢 ? 需要如何調整程式碼讓它正常？這是我的 [repo](https://github.com/viccjiang/2021layout_week6_exhibinection) / [gh-pages](https://viccjiang.github.io/2021layout_week6_exhibinection/) 謝謝助教
> 助教回覆：
> 1. 將外層 a 標籤設定為 `display: block;` 並將內層 img 設定 `width: 100%;`（這邊注意不要修改 img `max-width: 100%;` 的設定哦！）
> 2. 因為同學在這個區塊有設定 .col-md-6，所以文字區塊會被寬度限制住哩 ~

---

4. **zyc：**
助教妳好，有 3 個問題想請妳解答：
附上 [repo](https://github.com/zyan-c/wk6-EXHIBINECTION)、[page](https://zyan-c.github.io/wk6-EXHIBINECTION/)
1）為什麼瀏覽器在 575px 及以下沒有吃到 .container 的樣式？575px 以下所有區塊的內容都是貼齊最左和最右邊。（如圖）
2）scroller-nav 在 768px 以下字體會被切掉一半，不曉得是什麼原因。（附上 [HTML 第 34 行 code](https://github.com/zyan-c/wk6-EXHIBINECTION/blob/3cb5cf1eeb376f2882c9759323089ca747e4fb99/app/index.html#L34)、[SCSS 第 10 行 code](https://github.com/zyan-c/wk6-EXHIBINECTION/blob/3cb5cf1eeb376f2882c9759323089ca747e4fb99/app/assets/style/layout/_index.scss#L10)）
3）我想要有 fw-medium 的功能。在 BS 原生的 _variables.scss 新增了 `$font-weight-medium: 500 !default`，存檔成功，終端機沒有顯示任何問題，但是沒有成功編譯到 dist/all.css 內。
（另外，我目前的做法是在自己新增的 _fontsize.scss 檔案新增一個 `.fw-medium {font-weight:500;}` 的 class，但是還是希望可以使用變數的方式設定，所以先註解該 class。想知道除了直接新增 class 以外的方法）
再麻煩助教，辛苦了！
> 助教回覆：
> 1. [這邊](https://github.com/zyan-c/wk6-EXHIBINECTION/blob/3cb5cf1eeb376f2882c9759323089ca747e4fb99/app/assets/style/helpers/_variables.scss#L367) 少了單位，所以 container 的 padding 值消失了
> 2. 在手機版時 ul.nav 要調整為 justify-content: flex-start; 哦
> 3. 這邊如果要新增 font-weight 的話需要自己另外新增一個 SCSS 檔案修改 utilities 的部分哦。可以參考 [這邊](https://bootstrap5.hexschool.com/docs/5.0/utilities/api/#modify-utilities) 嘗試看看，如果還有問題可以再詢問！

---

5. **沈依蓉：**
請問助教:
在 767(mobile) 版型時要如何讓 EXHIBINECTION 可以對齊下方的宣告？我怎麼調它都無法對齊!
repo:https://github.com/lily-oa/local_art
pages: https://lily-oa.github.io/local_art/
> 助教回覆：
> 原本 .footer_word 有設定 align-items: center;，到了 767px 時更改了主軸線，所以 align-items: center; 讓上下文字水平置中了，這邊嘗試改變 align-items 的設定就可以摟
---

6. **周周：**
助教您好想請問我原本預期會占滿整個版面但是不知道為何右邊有凸出，這是我的 [repo](https://github.com/JHOUJHOU/BS5maintask) 及 [pages](https://jhoujhou.github.io/BS5maintask/)，想請問題出在那?
> 助教回覆：
> 可以嘗試將兩邊區塊各使用 width: % 來設定（總和 100%）。或是可以參考第五週助教直播的範例哦

---

7. **Kent：**
薰云助教，想和您求救關於第五週後台切版 Assignment 頁面的問題
有 3 個問題想詢問：
1. 關於最上方 All Courses 旁邊的向下箭頭間距問題，我使用position: absolute; top: 50%; transform: translateY(-50%); 使它垂直置中，但這樣就無法更改與旁邊 All Courses 的間距了。
2. 同一個地方旁邊的 icon（搜尋、鈴鐺） 置中問題，嘗試了幾種都無效，請問這邊如何置中
3. 左側 sidebar 因為 between 延伸出來的高度太多導致整體高度沒有和右邊相同，想詢問若建議如何解決這個問題呢:man-bowing:

作業連結：[repo](https://github.com/spmdl/bootstrap-dashboard)、[page](https://spmdl.github.io/bootstrap-dashboard/#)
> 助教回覆：
> 1. 可以使用 flex 哦
> 2. 可以在 icon 設定 `vertical-align: middle;` 或是 `display: block;`
> 3. 可以在 nav .sidebar 外層設定 min-height: 100vh; 並將 .sidebar 的 height: 100vh; 移除哦。另外背景顏色也建議移到外層來設定哩

---

8. **Joy Cheng：**
助教你好，
這邊附上我的 [Repo](https://github.com/Joy-port/week6/tree/master/app)
1. 在編譯的過程中，我的 sass 出現下方截圖這個問題，但是我沒有更動過 node modules 內的內容，同時在 variables 也沒有發現 utilities-text-color 這行變數，
2. 我在 all.scss 加入修改後的 utilites 變數，所以產生以下問題，想請問要如何加入 utilities 同時，可以解決這個問題
謝謝你～

3. 我先暫時在all.scss 備註起來，就編譯成功了，但是希望可以加上這兩行
> 助教回覆：
> 這邊建議同學如果使用新的 gulp BS5 版本，建議[拆開、分別引入需要使用到的 Bootstrap 內容（Option B）](https://getbootstrap.com/docs/5.1/customize/sass/#importing)哦。因為新的版本把 Bootstrap 拆開了，所以會有錯誤
> （如果使用原本的 BS5 版本，沒有跑不動的問題，就用原本的就好哩 ~）

---

9. **Karen Huang：**
助教好，這是我的 [repo](https://github.com/CodingSnorlax/dashboard/tree/master/app) 跟 [pages](https://codingsnorlax.github.io/dashboard/)。
我想問的第一個問題是，為什麼我的 button 中間會有這一條線呢？

第二個問題是，如果要加入 ckeditor，我是不是在 layout.ejs 這支檔案底下加入 CDN： `<script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/ckeditor.js"></script>`
然後接下來，應該在 html 內再寫些什麼，這部分挺困惑的，我有參考這篇文章：[CKEditor 5 文字編輯器 (研究心得)](https://medium.com/@charming_rust_oyster_221/ckeditor-5-%E6%96%87%E5%AD%97%E7%B7%A8%E8%BC%AF%E5%99%A8-%E7%A0%94%E7%A9%B6%E5%BF%83%E5%BE%97-519c97f20a4)
也把這一段貼到 all.js 裡，但好像沒成功！

        <script>
            ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor=>{
                    console.log(editor);
            })
            .catch(error=>{
                    console.error(error);
            });
        </script>

不曉得流程應該是怎樣的... 謝謝
> 助教回覆：
> 1. 將 a 標籤設定 `text-decoration: none;` 就可以哩
> 2. [version.number] 及 [distribution] 都是需要修改的哦 ~
> 版本號及想要的 distribution，另外在 [all.js](https://github.com/CodingSnorlax/dashboard/blob/master/app/assets/js/all.js) 中沒有看到程式碼哦哩
> 關於使用方式可以參考 [官方範例](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html)，或是穎旻助教的 [範例](https://codepen.io/AliceChiang/pen/QWvxRaK) 哦

---

10. **Mikan：**
助教好，我的 [repo](https://github.com/ElaineSung/week6/tree/master/app/assets/style) 跟 [pages](https://elainesung.github.io/week6/)。
我在嘗試學著修改 api 的時候遇到了一些問題：
修改 Flex 通用類別: 新增了一支自訂的 [_utilities.scss](https://github.com/ElaineSung/week6/blob/master/app/assets/style/utilities/_utilities.scss#L22)，想試著在 Flex 新增 class (因為不希望 class 名稱是使用 property 屬性名稱 )，但是檢查 [/dist/assets/style/all.css ](https://github.com/ElaineSung/week6/tree/gh-pages/assets/style)發現沒有編譯成功。
修改 font-weight : 想要新增 [medium](https://github.com/ElaineSung/week6/blob/master/app/assets/style/utilities/_utilities.scss#L73-L81) ，我是參考 [BS5 API](https://getbootstrap.com/docs/5.0/utilities/api/#modify-utilities) 去新增，也沒有編譯成功...( 在自訂的 _variables.scss 我有新增 medium 變數 )
第一次嘗試修改，如果有使用錯誤的地方還請助教幫忙指點了~謝謝!:pray:
> 助教回覆：
> 將 [這個](https://github.com/ElaineSung/week6/blob/71240bbbe3f032663692995a2ec91d630f6d5e77/app/assets/style/utilities/_utilities.scss#L133) 移到最前面（第 8 行）就可以哩

---

11. **Phoebe：**
助教好，想請教個問題 [repo](https://github.com/hff2/LayoutPractice) / [page](https://hff2.github.io/LayoutPractice/)。
1. 第四週的設計稿 24 頁的手機版 QA，在每一個第三個 p 段落中，都與第二個p段落有一段距離，目前使用 .fqa-content-qa-item-answers-answer:last-child:padding-top: 20px;（[_faq.scss](https://github.com/hff2/LayoutPractice/blob/main/app/assets/style/_fqa.scss) 的第 58 行）想推開距離，但目前無法推開(圖一)，想請教該如何是好呢？

2. 想請問 index 頁面的圖片(圖二)會根據視窗大小變動(因為使用了 %)，想請問是否要寫死，才不會導致有種伸縮的效果?

感謝助教
> 助教回覆：
> 1. 這邊觀看同學是設定到 .fqa-content-qa-item-answers:last-child 摟，將 [這邊](https://github.com/hff2/LayoutPractice/blob/4ab2ab7e838c24840c2dbcb087cacc3fd6f2810d/app/assets/style/_fqa.scss#L56-L59) 移到下方那層就可以哩
> 2. 不建議寫死哩，這樣是沒有關係的哦 ~
> 寫死容易產生 x 軸