---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/31 線上 Slack 助教
## 今日助教輪班時間
JasonLu：8/31 (二)
回覆時間：下午 1:00 -下午 5:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1.will:
老師助教同學們好，這是我的 作業
https://github.com/penuts27/art_exhibition
https://penuts27.github.io/art_exhibition/，
想請問我的m/pc畫面產生x軸的原因是什麼，找很久找不出來，並且在滑到「直播回顧」的時候會自己消失，並且想問下問題出在哪裡？
————————————
昨天助教有解答過是因為aos照成的空白，並在body中加了overflow-x:hidden，但我這邊看起來還是有噎，並且點擊右上角ticket icon，offcanvas也會從畫面空白那邊開始長，再麻煩幫我看一謝謝謝
助教回覆：
1. 這個 overflow 的問題主要是因為 aos 套件設定的 transform 造成的 (如下圖)，助教目前觀察到比較常發生在 由右往左出現的動畫，例如 zoom-out-left、fade-left。這邊附上 [github issue](https://github.com/michalsnik/aos/issues/227)
3.只在 body 寫 overflow-x:hidden 還始有空白有可能是 offcanvas 或是其他 aos 效果造成的，目前還沒有研究出確切的原因 ><，但確定 html、body 都加上 overflow-x:hidden 可以讓空白、x軸都會消失。
---
2.zyc:
Jason助教你好，想請問變數&通用類別的問題
如果想要客製化通用類別，並新增自己的_custom-utils.scss的檔案，
問題1）裡面的key可以跟 BS5 _utilities 的 key 名稱重複嗎？如果重複的話會無法成功編譯嗎？
問題2）如果 key 名稱一樣，也要預留BS5原本的設定，是不是要把 BS5 _utilities key 的內容複製過來，再新增自己的值？如果 key 名稱不一樣的話就不衝突嗎？
以 line-height為例，
我想要得到兩個結果：
a、新增2個 line-height → 1.3 和 1.8，並產生出 .lh-1.3 和 .lh-1.8 的 class
b、也想保留BS5 的 lh-1、lh-sm、lh-base 和 lh-lg
問題3）那請問在我新增的 _custom-utils.scss，這樣寫對嗎？還是有什麼建議的寫法呢？
//我新增的 _custom-utilities
```
"line-height": (
property: line-height,
class: lh,
values: (
"1.3": 1.3, //這樣寫對嗎？需要開關引號嗎？class名稱內可不可以包含小數點？
"1.8": 1.8,
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
),
),
```
問題4）_variables 的 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; 是什麼意思？我設定的 $spacers 也可以產生負值的通用類別嗎？那 -40px 的 classs 該怎麼寫呢？@@
謝謝助教～
助教回覆：
1.key 可以和 bootstrap 的 key 重覆。如果使用到變數的話就不能跟 Bootstrap 一模一樣，以免覆蓋掉 Bootstrap 的變數
2.如果 key 名稱一樣，也要預留BS5原本的設定，可以把整個 _utilities.scss 檔案複製到 helper 資料夾裡做修改，新增自己的值。key 的名稱，像是 property、class、values 都不建議做更動，建議按照 BS5 的格式，避免編譯出問題。
例如:助教實驗把 key class 改成 classname ，結果就造成 flex的 class 編譯出問題。
3.css 的 class 上不能有小數點哦!編譯出來會有語法錯誤~ 如果是小數點的話可以用 英文來命名，例如 xs 或 xl
4.這一行 scss 的目的主要是在產生負的 margin 值，預設是不啟用，如果要使用需要先把 變數 $enable-negative-margins 的值 改成 true，改成 true 之後就會把 $spacers 傳入 @function negativify-map()，回傳 (return) 一個帶有負值的 sass map，最後變數 $negative-spacers 會傳入 _utilities.scss "negative-margin" 裡的 values，透過編譯自動產生出負的 margin。
**所以想要產生 -40px 的 class 可以在 $spacers 新增 40px 的值，在透過 $negative-spacers 產生 -40px 的 class。**
```
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
@function negativify-map($map) {
$result: ();
@each $key, $value in $map {
@if $key != 0 {
$result: map-merge($result, ("n" + $key: (-$value)));
}
}
@return $result;
}
```
---
3.Peggy Tsai:
Jason 助教您好, 附上repo page 不知道是我哪邊去改到了 我在新增一個新的頁面(reservation.html)之後 就一直沒辦法gulp deploy 會一直產生下面的畫面 想請教要怎麼把它變正常 謝謝 我有查到資料說是要把publish資料夾刪掉再跑一次 但我不確定是不是這樣做
助教回覆：同學可以嘗試把 publish 資料夾刪掉 在 gulp deploy 一次 。如果刪除「.publish」之後狀況還是沒改善，那麼建議刪除「dist」資料夾並重新輸入 gulp build → gulp deploy 即可。
---
4.鉦勝:
助教你好
swiper有改版後，有把原本的.swiper-containere改成.swiper
js的部分也有修改過了，還是無法執行
想請助教幫忙解答
這是我的repo/page
助教回覆：
有以下地方需要做修改:
1.datepicker 在 all.js 沒有寫設定發生了錯誤，直接造成後面的 swiper 的程式無法運作，建議先將 datepicker 註解
2.建議 把 slidesPerView 全部移除，在 Swiper 7 是改成用 grid:{ row:...,fill:... } 來設定。
---
5.zyc:
助教你好，再補充一題：
我一直找不到要到哪裡去更改BS5 預設 a 標籤的 hover 的樣式，請問要如何修改這個部分呢？謝謝
附上 repo、pages。
助教回覆： 這一個設定在 mixin/_button.scss 的 @mixin button-variant 裡的 &:hover。
hover 的顏色會變成黑色主要是是背景顏色的關係。因為這個是有根據一個設計規範的，為了要讓字的顏色和背景顏色都清楚，所以他會去判斷對比度，足夠的話才會呈現白色字。
scss code 的部分助教在 [stackoverflow](https://stackoverflow.com/questions/67952873/customizing-bootstrap-5-button-colors-and-properties-in-it) 查到跟 Bootstrap [的色彩對比函數](https://bootstrap5.hexschool.com/docs/5.0/customize/sass/#color-contrast) color-constract() 有關，這一部分助教在第八週的作法是直接在自己的 scss 用覆蓋的
```
example:
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
color: $white;
}
```
```
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background), <----- 與 color-contrast() 有關
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
color: $color;
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
color: $hover-color; <-------------------------------- 在這裡
@include gradient-bg($hover-background);
border-color: $hover-border;
}
```
---
6.ZY Hsu :
助教好，我在這個繼續預約的按鈕上寫的jQ的.click(); 預期點下去之後會自動跳到
填寫資料的頁面，但卻發現並沒有真的觸發到按鈕，想請問該怎麼寫合適。
助教回覆：換頁按鈕的話可以不用對按鈕寫 click 事件，直接使用 a 連結的 href 屬性點擊連到填寫資料的頁面即可
---
7.lumei:
助教您好：這是我的repo和pages有幾個問題想請教一下
1.console裡會一直出現bootstrap和datepicker的錯誤訊息
2.請問如果我想將swiper js部分獨立成新的檔案，建議是在all.js裡寫什麼程式呢？ 還是在layout.ejs裡像附圖這樣寫(swiper.js)就可以了嗎？
再麻煩助教幫忙解答了！辛苦了
助教回覆：
1.因為datepicker 只有在填寫資料哪一頁會使用，所以在其他沒有使用 datepicker 的頁面會找不到元素節點 elem， 會回傳 null，而 null 帶進 datepicker產生錯誤 "Cannot set property 'datepicker' of null "，間單來說就是帶入的 elem 參數不能是 null。
2.bootstrap.css 的 error: 助教這邊看到 dist 沒有編譯出 bootstrap.css，原因是 all.scss 沒有 import boottrap.scss。把 <link rel="stylesheet" href="./assets/style/bootstrap.css"> 移除即可
3.swiper js部分獨立成新的檔案的部分 : 同學可以在 app/assets/js 裡新增一個 swiper.js (如圖)，這樣在 layout.ejs 就可以不用寫 <script> 引入 swiper.js，因為 gulp 編譯之後會把 app/assets/js 裡面的 js 全部合併到 dist/assets/js/all.js 裡
---
8.kaka:
助教好，我的 repo 和 demo，想請教 AOS 的效果，目前依照第七周的作法加在 “感受身心，活在當下“這個區塊上，但畫面卻沒有出現動畫…再麻煩助教幫忙解答了，感謝
助教回覆： 同學 aos 使用的部分沒有問題，問題是出在 js datepicker 發生錯誤導致後面的 AOS.init 無法執行 ( 打開 chrome dev 可以看到錯誤訊息 )。因為datepicker 只有在填寫資料哪一頁會使用，所以在其他沒有使用 datepicker 的頁面會找不到元素節點 elem， 會回傳 null，而 null 帶進 datepicker 會產生錯誤 "Cannot set property 'datepicker' of null "，間單來說就是帶入的 elem 參數不能是 null。
**修改的部分會建議將 aos、 datepicker js 的位置對調，把 datepicker 放在最後，這樣就正常了**~
---
9.roger chuang:
助教你好，我想把 精心設計這區塊的圖片做成跟設計稿一樣，我在 li上使用了ratio ratio-1x1，正常來說圖片寬高會跟設計稿一樣，可是我弄出來後圖片變的很小，請問助教我該從哪邊調整，圖片才能跟設計稿一樣?
助教回覆： 這是因為 使用 flex 之後 內元件 li 的空間無法容納 1*1 img 的寬度，所以會等比例縮小。可以在內元件 li 加上[.flex-shrink-0](https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/#grow-and-shrink) 阻止 li 空間等比例縮小
修改後會變成這樣:
---
10.Jiang V:
助教您好，想請問如何讓這四個 li 寬度像設計稿一樣呢，在不要去指定寬度的狀態下，有嘗試用flex-grow之類的class，但都無法起作用，請要要如何調整程式碼讓這四個li像設計一樣排列，這是我的 repo / gh-pages 再請助教協助解惑，感謝助教
助教回覆： 這一塊的確不好做，助教也想了很久。這裡可以用 格線 col- 搭配 offset 來做，這邊傅上結構圖
---
11.Sec:
助教好，想请问关于 "師資介紹" 的 swiper 问题，如图可见我的头像都被 swiper 预设的 overflow: hidden 给盖掉了有什么办法让头像完整显示, 尝试了很多例如 overflow-x: hidden 等的方法还是没有效果
ghpage: https://secyj.github.io/weblayout-week-8/course-intro.html
code : https://github.com/SecYJ/weblayout-week-8/blob/master/app/course-intro.html
助教回覆： 可以修改 overflow 的位置:
1. 用 .overflow-visible 把 swiper 預設的 overflow-hidden 覆蓋，讓頭像出現
2. 在 container 那一層 加上 .overflow-hidden
```
<div class="container overflow-hidden">
h2...
<div class="swiper overflow-visible ...">
...
</div>
</div>
```
---
12.粘勝凱:
助教好，我想問直播回顧左邊有一塊#190014CC色的矩形，請問那個矩形是怎麼置入的？
助教回覆：背景圖片可以在 row 那一層使用 background-image，文字內容的話可以用格線來做。
#190014CC 的背景顏色可以用偽元素搭配 position 來做 ( 手寫 )
1.在 col 那一層加上 position-relative
2.格線 .col- 那一層使用偽元素 ::after + .position-absolute
3.因為背景有半透明，所以要使用 opacity
4.因為背景顏色會蓋住文字，所以需要加上 z-index
```
classname::after{
position:absolute;
content=" ";
display: ...;
background-color: ....;
opacity:...;
width:...;
height:...;
top:...;
left:...;
z-index:...;
...
}
```
---
13.粘勝凱:
助教好，我想問中間的經典系列鏡框，在螢幕375px以下時，字直接貼在圖片上的效果該怎麼寫？
助教回覆： 這一塊可以用 position 來處理:
1.在圖片、文字的父層加上 position:relative;
2.在375px時，文字區塊加上 position:absolute; 讓其脫離原本的位置，以父層 relative 為基準點偏移
---
14.周周:
助教您好~這是我的repo & pages ，想請問瑜珈空間下方的課程推薦，
1.用swiper.js套件為何每一個會滿版?
2.用overflow-auto，想請問下方的卷軸要如何隱藏?
助教回覆：
1.這是因為 .swiper-slide 設定 width:100% 造成的，如果要調整每一個 swiper-slide 的寬度需要到 js 將 slidesPerView auto 改成其他數字，每個 swiper-slide 分配到的寬度是 父層 .swiper 的寬度除以 slidesPerView 的數值。如果 slidesPerView 是 "auto" 的，每個 swiper-slide 的寬度會是 100% 佔滿整行。
2. 可以使用偽類 ::-webkit-scrollbar 來讓 scrollbar 隱藏，可以參考這篇[文章](https://ithelp.ithome.com.tw/articles/10197593)，只是文章的都是加上 body，而在這裡則是要以 class 的方式加在 .overflow-auto 那一層
```
p.s classname 要換個名稱
<div class="overflow-scroll d-flex classmame ">.... </div>
classmame{
-ms-overflow-style: none; //for IE
}
classmame::-webkit-scrollbar{ // for google chorme
display:none;
}
```
---
15.助教好，我的 repo 和 demo
昨天有請教 AOS 的問題，試了您的回覆(NO.8)，把 date picker 和 AOS 順序對調，但還是沒辦法解決…再麻煩助教協助看哪裡出了問題，感謝
助教回覆：助教這邊的改法 是把 app/assets/js/all.js 裡 date picker 和 AOS 的順序對調
```
改之前 :
// Date Picker
const elem = document.querySelector('input[name="datePicker"]');
const datepicker = new Datepicker(elem, {
// ...options
autohide: true,
nextArrow: '>',
prevArrow: '<',
buttonClass: 'btn primary',
todayHighlight: true,
});
// AOS Animation
//AOS.init();
AOS.init({
once: true,
offset: 400, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 1000 // values from 0 to 3000, with step 50ms
});
```
```
改之後 ( 可以 work )
//前面都是 swiper
// AOS Animation
//AOS.init();
AOS.init({
once: true,
offset: 400, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 1000 // values from 0 to 3000, with step 50ms
});
// Date Picker
const elem = document.querySelector('input[name="datePicker"]');
const datepicker = new Datepicker(elem, {
// ...options
autohide: true,
nextArrow: '>',
prevArrow: '<',
buttonClass: 'btn primary',
todayHighlight: true,
});
```
---
16.ZY Hsu:
助教好，關於我的問題，或許應該講得更清楚一點:
我在這個繼續預約的按鈕上寫的jQ的.click(); 預期點下去之後會自動跳到
填寫資料的頁面，(但我是用"導覽與頁籤 (Navs and tabs)"，所以並非用a連結換頁，預約流程都在同一頁)。我希望透過按繼續預約的按鈕跳到下一個流程，
並且這三個分頁區塊是不能點擊的，只能填完資料按繼續預約才進入下一個流程。
我目前是用jQ寫click在繼續預約的按鈕上，但實際操作後只發現它並沒有真正觸發按鈕，只是觸發我寫這個按鈕的其他效果(例如:收合預約須知區塊)而已，因為並沒有達到換頁的效果。
想請問助教這部分該怎麼寫比較適當。
助教回覆： 助教這邊測試，在 click .keepReserveBtn 之後只有收闔預約須知區塊，在點擊之後還需要讓 #chooseProject (選擇方案) 隱藏，#fillData (填寫資料)出現。
思考方向大概是這樣:
.keepReserveBtn clicked (事件觸發) ---> .reserveRemind 消失 --> #chooseProject 消失 --> #fillData 出現
助教的做法是在 .keepReserveBtn click 之後對 #fillData、 #chooseProject 新增/移除 class show、actice，因為 tab 的顯示切換是透過 show, active 這個 class，所以可以切換 class 達到效果
```
$('.keepReserveBtn').click(function () {
$('#fillData').addClass('show active') <-------- 加上這兩行
$('#chooseProject').removeClass('show active');
$('.fillDataPage').click().removeClass('disabled').addClass('active').parent().siblings().find('.activeTertiary').removeClass('active').addClass('disabled');
})
```
---
17.助教您好~這是我的repo 和 page
在layout(md和mobile版)裡有放一個點擊icon頁面網上滑動的jQuery,但效果都出不來,網頁顯示Uncaught TypeError: $(...).animate is not a function
可是其他作業的同樣做法就可以想知道怎麼辦,另外在課程介紹裡的modal,如果加了modal-dialog-centered的話整個modal被拉長,不是原本的尺寸置中是因為什麼呢~~
以上麻煩您了!!謝謝~
助教回覆：
Q1.
* 目前 vendors.js 載入的 jq 是 slim 版的，不包含 ajax、effect 效果，因此建議同學引入 這支 [jquery(有包含ajax、effect 效果)](https://code.jquery.com/jquery-3.6.0.min.js)
[jquery 官網說明](https://jquery.com/download/)
Q2.
* 建議把 .card 移除，因為 .card 裡的 flex-direction:column 會影響 .modal-dialog-centered 內 align-items:center 垂直置中的方向
* 同學背景顏色和、padding 設定放錯地方了，要放在 .modal-content 那一層才對。如果放在 .modal-dialog-centered 那一層會看起來被拉長，但其實是因為 modal-dialog-centered 有設定最小高度，如果加上 .bg-primary 則整個區塊都會填滿。
```
@media (min-width: 576px)
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
```
---
18.James
助教好，我在立即預約表單裡的姓名/年齡這區塊會破版，目前嘗試過使用w-50以及格線系統col-6都是一樣的結果，想請問是哪裡出了問題?
我的 repo / pages
助教回覆：input 會破版主要 跟 input 的 size 屬性有關，size 決定輸入區塊的寬度可以顯示多少文字，預設可以容納 20 個文字，直接影響了 input 的可見寬度，這邊提供 [文章](https://matthung0807.blogspot.com/2019/08/html_0.html) 給同學
修改的部分，助教比較不會去修改 input 的 size 屬性，會比較建議在 input 上使用 Bootstrap 的通用類別 [.form-control](https://bootstrap5.hexschool.com/docs/5.0/forms/form-control/#example)。
如果不想用 Bootstrap5 的元件也可以直接在 input 加上 .w-100
```
<input type="text" id="name" placeholder="請輸入您的姓名" class="form-control">
or
<input type="text" id="name" placeholder="請輸入您的姓名" class="w-100">
```
---
Sign in with Wallet
Connect another wallet