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

# 8/25 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. Jemma：

助教好：今天有兩個問題
1.想請問，昨天我上傳都還好好的，為什麼今天一直出現圖片上這個錯誤說明（附圖）？
2.hover 如果不想再多一個 scss，想盡量減少 scss 檔案的話，應該可以怎麼寫呢？還是只能多一個 scss？
謝謝助教解惑!!

> 助教回覆：
>
>1.這個可以先把檔案備份一份，然後先[參考這個](https://stackoverflow.com/questions/32056324/there-is-no-tracking-information-for-the-current-branch)試試看。
>
>2.hover 一定只能多一層 SCSS 喔，這個是無可避免的。除非透過 jQuery 或是 JavaScript 來做處理，不然一定只能多那一層。

---

2. 鉦勝：

助教你好:
我想請問一下，第八周作業的Reservation和Reservation-choose
這兩個是算在同一頁嗎?還是說要分開寫?

> 助教回覆：這個會建議寫在同一頁，但這可能會需要一點 JS 或是運用 Bootstrap 的 collapse，但如果不會使用的話，建議直接寫在下面就好。

---

3. Karen Huang：

助教你好：這是我的repo & page
我想要問的是，為什麼在我的layout.ejs內的第23行，我本來想用align-items-center將navbar內的三項都垂直置中，但發現下了語法都沒動靜，於是我自己查看，發現在ul li這個list 及 h1的logo都有不明的margin-bottom? 想問這個margin-bottom是為什麼會產生的@@? 是因為d-flex的緣故嗎（？）然後我在個別上面下mb-0才消除掉，這三項才垂直置中...。謝謝助教

> 助教回覆：這裡在 .navbar 預設就有加上 align-items-center 了喔，如[圖片](https://imgur.com/a/TOFyR84)。會有那個 margin-bottom 是因為 Bootstrap 標籤預設就有了，如[圖片](https://imgur.com/a/42BrhfQ)。因此這裡會建議加上 reset.css 來清除所有的標籤預設行為。

---

4. Kent：

焦糖大大您好：
想詢問關於第六週兩個問題，
1.scrollbar 的 border-radius 問題，我預期它 scrollbar 上下兩端會有圓角效果，但結果背景沒有 radius ，只有裡面的滾動條有radius，程式碼連結

2.border 導致 width、height 多 2px，像 header 最上面設計稿是高度 80，但因為 border 關係會變 82，box-sizing: border-box;，可以解決但前提要先設置高度，這樣代表我要在不同斷點設置不同高度，想詢問助教使否有其他解決辦法。
作業連結：repo、page (已編輯)

> 助教回覆：
>1.這個是因為你沒有加上 .scrollbar 喔，加上去就會發現樣式改變了，如[圖片](https://imgur.com/a/vS1wtGq)。
>
>2.你可以改用 outline 的方式，這樣高度就會維持在 80px 了喔。

---

5. 黃羽均：
助教您好，我在第六週作業想要修改bootstrap裡面的margin、padding的話該如何修改?
例如：我希望是4px為一個單位
mt-1表示 margin-top:4px
mt-2表示 margin-top:8px

> 助教回覆：這個可以修改變數 _variables.scss 裡面的 $spacers 喔！例如 "1": .25rem。

---

6. Jiang V：
@焦糖 助教您好，我在 這個 col 下了 mb-md-9，但 pad 版開始就會超出格線跑版，請問程式碼要如何修正呢 ? 這是我的 repo 再請助教協助解惑，謝謝助教

> 助教回覆：這裡想先確認，你的跑出格線是指[圖片](https://imgur.com/a/bFLNFEp)紅框處對嗎? 因為我有移除 .mb-md-9 一樣是會跑出格線的，因此不太確定你指的是不是圖片的地方。如果是的話，只要移除[圖片](https://imgur.com/a/ZQIpzza)中的 .h-100 就可以了，移除後圖片的高度記得要再調整一下，img 標籤外層的 .h-100 也要移除。

---

7. Kent：
焦糖大大您好，
關於剛剛詢問的問題一，我沒說清楚不好意思，我是指 Cart 裡面的 scrollbar，我有加上 scrollbar 了，但它滾動條的外框還是沒有圓角效果。

> 助教回覆：這個只要把 border-radius 加在 .scrollbar::-webkit-scrollbar-track 就可以囉，你再試試看。只是稍微有點不太明顯，我[這邊](https://imgur.com/a/fYeXFi2)放大給你看一下。

---

8. Sec：
助教好，想请问第8周的 "課程介紹" 的 input 问题
使用的是bootstrap的 input-group component 遇到的情况是 2个物件没办法向左靠有尝试了很多 flex-grow 等等的都没办法盖掉它的 css
code - https://github.com/SecYJ/weblayout-week-8
ghpage - https://secyj.github.io/weblayout-week-8/ (已編輯)

> 助教回覆：原因是 .input-group 有預設 width: 100%，如[圖片](https://imgur.com/a/HLem42z)。若這裡要使用 Bootstrap 的 .input-group 的話，就只能強制修改 width。修改完後就可以靠左對齊了，[如圖](https://imgur.com/a/Gp1IfBs)。

---

9. 雷古娜：
焦糖助教您好，這邊還能發問嗎？
codepen: https://codepen.io/tinahopo/pen/XWgJRwd
我想問swiper，我弄了一早上，本來都出來，結果寫完下一區塊就，上面的swiper就壞了...會把左邊也吃掉，X軸也跑出來了....:啜泣:
平板、手機也都無法到第二行
請問哪邊寫錯了？
謝謝您！ (已編輯)

> 助教回覆：這個是剛好遇到 swiper 的版本更新，所以可以先把 .swiper-container --> 修改成 .swiper 就可以了，[官方文件](https://swiperjs.com/migration-guide#html-layout)。

---

10. Kent：

焦糖大大您好，

想詢問關於有兩個地方 space-between 沒有效果的問題：

1.想詢問這個區塊，space-between 沒有效果，我預期讓這個區塊內的元素可以有 space-between；以及想問這個區塊 input 的寬度可以依照內容來延伸寬度嗎？不然都只能寫死 width 寬度。

2.以及在手機版時這個區塊，space-between 沒有效果。

關於圖片如何設置高度後，並自適應滿版：
圖片設置高度時，隨著視窗縮放時沒有自適應產生下方空白的問題，程式碼連結。

文字切齊邊界的問題：
問題頁面，想詢問是否一定要設置寬度才有效果（嘗試使用 word-break: break-all; 但沒有效用）

再勞煩助教幫我解答:男人鞠躬:
作業連結：repo、page (已編輯)

> 助教回覆：
> 1. 這裡是因為寬度不夠的關係，所以看起來 .justify-content-between 才會像是沒有效果。因此可以針對寬度來修改，如[圖片](https://imgur.com/a/IoA9btv)，左邊是 .w-50 右邊是 .w-100，接著再修改 input 的寬度就好了( 因為有使用 .form-control 因此預設會是 width: 100% )。但這區塊比較好的做法還是透過 col 來排版喔，可以[參考連結](https://bingbingboom.github.io/hexschool-2021-webLayout-exhibinection/orderConfirm.html)。另外 input 寬度只要單位用 % 就可以隨著解析度來縮放，像是 BS 的 .form-control 就有加上 width: 100%，但這裡可以先寫死就好 。
>
> 2. 這裡只要給它一個高度 height: 84px 就可以了，如[圖片](https://imgur.com/a/RrSPMLS)。
>
> 3. 這裡的意思是如[圖片](https://imgur.com/a/AtfVeYh)中下面的空白嗎? 因為你有寫死圖片高度的關係，才沒有自適應喔！也是因為旁邊的文字跑版了，所以造成跟圖片的高度才會不同。
>
> 4. 可以嘗試使用 text-align: justify; 來使文字對齊邊界喔，如[圖片](https://imgur.com/a/Yl8FOaN)。