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

# 8/16 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. debby yeh：
助教早安，
想要詢問兩個問題
關於cdn是否沒嵌入好，swiper套件好像沒有成功，不確定是不是JS寫錯?
我的mixin沒被index吃到，但是有檢查過all.scss裡面，順序是對的，而且樣式也有呈現，但還是一直出現以下錯誤。(附上圖片)
> 這邊可能要先請你 git push 將 Gulp 原始碼更新，我這邊點開來沒有看到 pages 資料夾，幫我更新一下 github 我等等幫你看
---
2. Jiang V:
@耕緯 助教您好，我想請教 swiper 這個區塊，因為這裡有推 offset-lg-1，但是往左滑之後推掉的空間又跑到前面了，想請問要如何調整程式碼，讓它都保持有 offset-lg-1，這是我的 [repo](https://github.com/viccjiang/2021layout_week6_exhibinection/blob/c3898e7d1aa12bfa11ed80071c78f3e29583b9f7/app/_swiper.ejs#L16) / [gh-pages](https://viccjiang.github.io/2021layout_week6_exhibinection/)
>這邊幫我參考 [8/13 的每日任務](https://codepen.io/klrkicog/pen/ZEKPymb)，結構再幫我檢查一下
---
3. Alicia Lo:
這是我的Github repo 和 Github page。以下有兩個問題想請教助教:
1 我想要在 Bootstrap 新增文字RWD斷點的設定，有先參考此討論串的做法，已有在 all.scss 引入一個 自己複製的 utilities檔案，並且於該檔的 font-size 部分新增 responsive:true;。 但是嘗試後似乎沒有成功，例如我在 layout.ejs 的 第18行 header__title 文字預設為 fs-4 ，當螢幕解析度是md 以上要變成 fs-md-1，但畫面並無改變:smiling_face_with_tear:(p.s.我設定的數值僅為測試斷點變化，並不符合設計稿)。
2 我在index.html 的 第8行加入d-flex 和align-items-center，希望裡面的文字內容水平置中，但是發現按鈕區塊(第14-17行)並不會被 container 的padding 推擠，需要再於外層(第13行)包一個 container才可以。想請教助教這是甚麼原因呢?
>Q1. 這邊幫我把 449 行的 rfs: true, 刪掉後試試看，如果 VS code 有裝 Watch Sass 可以幫我看一下有沒有成功編譯出來 [BS5 utilities 客製化](https://youtu.be/0K-HHsC7rS8)
Q2. row 有預設 margin calc(var(--bs-gutter-x) * -.5); 可以直接套用 mx-0 即可
---
4. 軒仔:
助教好，我有兩個問題想問，放在同一個codepen。
1.我對圖片下了object-fit: cover width:100% height:100% 但引入bs的modal後卻沒有達到預期效果，原本預期會適應正方形，結果寬被吃掉了
2.在select下拉選單下padding，選單右側的down圖示卻沒有被padding推開，不知道要怎麼修正
我的codepen:
https://codepen.io/loking23/pen/MWmRmMP
>Q1. 拿掉 24 行的 w-100，下面的區塊塞在一列了所以擠壓到了
Q2. 這邊選擇使用 selct option 的話，想要修改樣式要從 background 下手，實際上 padding 確實有生效，只不過對於文字，select 標籤的下拉框樣式是預先寫好的背景，要移動可以調整他的 background-image 位置
---
5. Peggy Tsai
耕緯助教您好: 附上repo 和 page 我想請教下圖這個部分 圖片沒有想我預想的會填滿 並且和左邊的欄位一樣高 不知道是哪邊寫錯了 再麻煩您協助確認 謝謝
>整體的框架高度因為 flex 的關係確實一樣，但這邊要讓圖片充滿整個區塊，幫我在 img 下
h-100(height: 100%) 才能讓圖片的高度為 區塊的 100%，考慮到圖片跑版問題記得加上 object-fit: cover;
---
6. 哈哈哈哈娜
助教好～
先附上我的 [page](https://cih1120.github.io/hexSchool_week6/detail.html)與 [repo](https://github.com/cih1120/hexSchool_week6)

1.我想請問我的「購買票券」按鈕點下去後顯示的購物車，
更改數量的欄位寬度一直卡很寬，但我沒寫認可padding或margin之類的，
想請問怎麼讓他寬度變成自然寬度呢？
2.第二個section 我明明有寫container ，不知道為什麼用gulp預覽、git hub page，那行class都會變成亂碼？
> Q1. 可以在 input 設定寬度，
這邊建議你在這邊調整為 between
Q2. 助教這邊測試後，把那行刪除後重新打一次就好了～～可能是複製貼上或不小心按到別的東西ㄌ
---
7. kevinhes
耕緯助教您好:
這是我的 githubpage 以及 repo
我想要請問一下，在設計稿的 mobile 版面格線系統總數為四
那我的 code 例如說在購票的面的按鈕在 mobile 版面上要改成 col-2嗎?
我有試著改過，但就變成跑版了，但是如果使用 col-6 的話 又變成說在moblie 版面的 gutter太多
請問這個部分是不是乾脆不要使用格線系統呢?
>這邊會使用 col-6(width 50% + gutters)，[gutters](https://bootstrap5.hexschool.com/docs/5.0/layout/gutters/也是可以調整的
---
8. Jiang V
@耕緯 助教您好，我嘗試用 mb-auto 將 這個區塊 往下推到跟設計稿一樣的位置，但好像都不起作用，想請問為什麼會不起作用，另外這裡需要如何調整程式碼，才能讓按扭區塊可以移置設計稿的位置呢 ? 這是我的 repo / gh-pages 再麻煩助教解惑，謝謝助教
> 這邊下了 align-items-center 在外層所以 auto 沒有效果，這邊可以用 magrin 推，或是使用 align-items: flex-end; 也可以試看看，或是說將
看成一個區塊，這樣下方就容易對齊了
---
9. zyc
@耕緯 助教您好，有4個問題想請教：
1）參考 design.html 和截圖1，
想請問為什麼 .nav-scroller 會繼承 index.scss 的樣式？我明明有另外寫 _design.scss 並移除 border-bottom。我預期在 index 以外的頁面，.nav-scroller 都不要有 border-bottom。
2）為什麼設定 _mixin.scss 斷點後，在 _design.scss 呼叫 mixin 無效？預計 .design-banner 在 mobile 斷點的時候會從原本的 padding-top:80px; padding-bottom:52px; 變成 padding: 44px 0;
3）在 layout.html 的 swiper區塊，如何讓瀏覽器大於等於 1400px 之後還維持 col 之間 30px 的距離？
4）同第三題的code，每個裝有圖片的區塊設定 col-12 col-md-4，預期在手機版上只出現一張圖而不是三張並排，但為什麼會無效？
附上 repo 和 pages，謝謝
> Q1. 在編譯時SCSS會 all.scss 中 按照@import 的順續去編譯，最終形成"一個" CSS 檔案，每個頁面都會共用同一個 CSS 檔案，所以這邊不同分頁在 class 的命名要注意不能夠重複(當然共同樣式的當然可以統一命名)
Q2. mixin 時的寫法錯了，不是 @media(min-width: 576px)是 @media(max-width: 576px)
Q3.Q4. 這邊參考 [8/13 的每日任務](https://codepen.io/klrkicog/pen/ZEKPymb)

10. 格可
助教您好，想請教的問題是假日在slack上面問的這個:
https://app.slack.com/client/TH78FC3JL/C0201HR4W5P/thread/C0201HR4W5P-1629001134.416000
(同個專案有分頁正常編譯，有的卻不行)
這邊是我的github
> 這邊觀看你的作業採用 Bootstrap，麻煩幫我載這個 [gulp 範例](https://github.com/hexschool/web-layout-training-gulp/tree/feature/bs5)你用到沒有放入 Boostrap 的，下載完再將檔案放上去試試看
---
11. Sec
助教好, 想请问 :
首页 banner 有2个 buttons，设计稿在 375px 的时候是 2个 buttons 是 row方向排的，但是我的 2个 buttons 在 375px 却是换行了, 请问有什么办法解决?
首页 "热门特展" 的 card 部分, 手机版 card 的背景颜色是灰色满版的，想来想去只有新开多一个 <div><div class="container"></div></div> 来解决
首页 "猜你喜欢" 的部分, 在手机版的时候能否把 swiper取消掉。
ghpage: https://secyj.github.io/weblayout-week-6/
code: https://github.com/SecYJ/weblayout-week-6
> Q1. 這邊觀看畫面呈現上沒有問題，結構上建議搭配格線系統做設計
Q2. 將背景顏色下在與 row 同層即可
Q3. 可以不用取消改用成一次出現一個，可以參考 [8/13](https://hackmd.io/KJ3tCwZNTq2VkmelntkthA) 每日任務 JS 的部分
---
1. anna
助教您好，想問一下~
1.關於熱門特展排版的問題:
目前的排列如圖，我在橘色部分下了flex和flex-column，然後用space-between想把兩個藍色區塊做上下貼齊，但card-body寫了height:63%沒有起作用，兩塊還是黏在一起，但寫了px(如200px)就會分開，想問如何讓藍色兩塊能夠上下貼齊?
右邊的日期和icon也是同樣的問題。
2.熱門特展的內文字體是Roboto，_variable.scss也有預設字體，但目前內文無法吃到Roboto這個字體，要特別在熱門特展加上font-family:Roboto的css才能讓他吃到，請問一定要這樣寫嗎?還是有其他方法?
3.導覽列的hover會跳動，猜測是hover寫的偽元素造成的，有辦法解決這個問題嗎?

>Q1. [請在這行](https://github.com/annanaha/week6-hw/blob/main/app/index.html#L24)加入 h-100，照著設計稿的設計會自己跟 btn 相連
Q2. 這樣寫可以
Q3. 這邊底線可以用 hover 產生border-bottom ，偽元素會撐開容器高度