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

# 8/27 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. 黃羽均：

助教您好，我想詢問我的購物車卷軸我希望他可以在每一個白色框框的右邊而不是貼其在白色框框，有試過給margin但好像沒辦法。
github:68行開始
https://github.com/huang-yu-jun/ticket-website/blob/main/app/assets/style/layout/_layout.scss
page:https://huang-yu-jun.github.io/ticket-website/

> 助教回覆：這裡可以把 .cart-item 的 width 和 height 移除，並且加上 margin-right 就可以囉，如[圖片](https://imgur.com/a/RW45kRM)。另外要避免區塊直接寫死「寬度」及「高度」喔，讓區塊隨著內容來做縮放就好，若要推擠區塊的話可以善用 padding。

---

2. 袁祥恩：

助教您好~
repo
page
我在 另一個 customer swiper 的部分，在 ipad畫面 使用swiper 套件 也改class名稱，但是效果沒有出來～不知道怎麼回事
index.html 第385行
index.scss 第87行
all.js 第13行

> 助教回覆：首先先在 index.html [第 384 行加上](https://imgur.com/a/IrVmHlD) .swiper。
接著把在 all.js 的 grid: { rows: 2, } --> 修改成 { rows: 1, }，就會發現正常許多了，如[圖片](https://imgur.com/a/3Ygr9OS)。
你再嘗試看看喔 ~

---

3. zyc：

嗨焦糖助教，想請問：

1）師資介紹的卡片，為什麼在 .card 套用 .h-100 無法使卡片同高，在 dev tool 上修改的時候就可以？請見 code。

2）如何修改師資介紹的 x 軸

3）在 course-intro code 的地方加上 .overflow-auto，使用 absolute 的
圖片就被裁掉了，為什麼？請問該怎麼解決？
謝謝～ (已編輯)

> 助教回覆：
>
>1.原因是 .h-100 是 height: 100%，指的是 .card 整體的高度，也就是文字的多寡會影響到 .card 的高度，所以看起才沒有任何一致性。這裡會建議在外層 .swiper 寫死高度就好了，如[圖片](https://imgur.com/a/NpjqzhT)。若不寫死高度這裡也提供另外一種方法，可以[參考範例](https://codepen.io/hexschool/pen/PomJOVN)。
>
>2.學員已自行解決，讚讚
>
>3.原因是 .overflow-auto 會隱藏自己高度以外的區塊，如[圖片](https://imgur.com/a/8XerNZi)中的選取的範圍就是這個區塊高度，加上去之後會隱藏這範圍之外的內容，可以[參考範例](https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_auto)(你可以試著把 overflow: auto; 移除來比較差異)。
解決的辦法就是不要加上去就好哩，因為使用 .overflow-auto 就是會有這效果，可以說明一下為何會想要加上此語法呢 ~~

---

4. debbie：

助教好;
問題1: boostrap _variable 裡面除了顏可以改, 其它的數值不要改嗎?
常卡住, 再複製没修改置入後没事，卡了太頻繁，乾脆刪除all.scss 的@import './helpers/variable' 連結，卻可以用，但新改的數植没作用, 例如圆角,行高。
要如何使用才正確?

問題2: 要增加較大字級和行高....等，要如何處理? 常scss裡編寫會卡住不能改.，也不想scss裡code太長?
問題3: boostrap rwd 要如何使用?

例如: (做了没作用 ! )
.banner {
@include media-breakpoint-down(md) {
.banner-main {margin-right: 30px;
}
}
}
以上問題,謝謝助教
https://debbie221820.github.io/week8/
https://github.com/debbie221820/week8 (已編輯)

> 助教回覆：
> 1.可以唷，你可以只改顏色就好，其他的可以不需要更動。關於圓角使用方法可以參考[官方文件](https://bootstrap5.hexschool.com/docs/5.0/utilities/borders/)，行高可以參考 [Bootstrap5 Text](https://bootstrap5.hexschool.com/docs/5.0/utilities/text/) 底下的行高喔。
>
> 2.若想要加大字體和行高，卻不想要寫 SCSS 的話，可以利用 Bootstrap 預設的 Text 相關屬性，例如：```<p class="fs-1">.fs-1 text</p>```，```<p class="lh-1">This is a long </p>```，官方都有很詳細的介紹喔。
>
>3.這裡要先使用 @mixin 才能夠使用 @include 喔，可以先[參考這一篇文章](https://5xruby.tw/posts/play-sass-mixin-and-include)。

---

5. kevinhes：

焦糖助教您好:
這是我的 page repo
我想要請問一下 我希望 reserve 第 80 行的 .class-lv 可以由 第 42、57、72 的按鈕觸發 slidedown
但是在 all.js 的第 5 行的sidedown 卻沒有效果 但是如果改成 toggle 或是 toggleclass 又有效果
再麻煩助教回覆 (已編輯)

>助教回覆：slim（輕量版）的 jQuery，是不含動畫的部分，所以 slideDown 就不能用哩
改為一般的版本就可以囉。

---

6. 蔡明達：

助教您好
Repo
Page
W7 Header 與 Footer 的 Hover 效果無法如預期出現 :cry-n-yell:
再麻煩助教回覆
SLACK 蔡明達

>助教回覆：我這邊直接使用 .nav-link:hover 來修改是有改過去的喔，如[圖片](https://imgur.com/a/gkiX2Kf)。你再嘗試看看，改不過去大部分都是權重沒有對方來的高。

---

7. 軒仔：

助教好，
我使用bs的input、btn樣式，但在父層下d-flex後會使input拉伸，以及button會擠壓文字，想詢問如何解決這兩個問題，謝謝助教！
codepen:
https://codepen.io/loking23/pen/ZEyGoJX

>助教回覆：若使用 Bootstrap 的 .form-control，input 預設會是 width: 100%，所以才會造成 button 的按鈕被壓扁。這裡只要調整 .form-control 的 width 就可以了 --> 修改成 width: auto; 就可以了

---

8. anna：

1.請問精心設計課程的swiper如何寫斷點設計，讓它可以換行，也就是在平板的時候第3、4個slide換到下面，變成4格排版

2.我的手機版漢堡選單第一次點的時候是順利展開的，但第二次之後點它，展開都會卡卡頓頓的（ 如下面錄影） (已編輯)

>助教回覆：

> 1. 待釐清中，舊寫法不適用 (剛好遇到改版)
>
> 2. 這裡因為你使用了二個相同的 id，如[圖片](https://imgur.com/a/ENEcWEK)。造成摺疊效果跑了二次，因此只要移除第 61 行的就可以了。另外提醒 id 是唯一值，一個頁面不能出現二次喔！

---

9. zyc：

回覆助教第三題：因為如果移除 over-flow：auto 就會出現 x 軸了，如圖。
我在另一個瑜珈空間頁面的頁面也是使用 over-flow：auto 來解決x軸問題的，但是那個區塊沒有 absolute 元素所以看起來很正常

> 助教回覆：這裡首先先把 .swiper-container 換成 .swiper 就可以解決 x 軸問題了，接著大頭貼不要使用絕對定位的方式，可以把 img 圖片移到 .card 的外面，接著在 .card 加上 margin-top: -40px; 把整個區塊往上推就可以了！如[圖片](https://imgur.com/a/kCP3yc6)。你可以再嘗試看看喔

---

10. Fred Chang：

助教您好,
這是我的Repo、Pages，想請教:

1.在layout.ejs的第67行，如果這個div沒有加上d-flex的話，我的兩個按鈕間就會產生不明的空隙，是為什麼呢? (附圖)
在layout.ejs的第75行，我加上自訂的class想把"立即預約"這個按鈕的border改成

2.符合設計稿的0.5px，但用chrome查看卻是0.667，這是正常的嗎? (附圖)
在layout.ejs的第127行，footer的logo我必須要給固定寬度才能讓圖片不會過大，

3.想知道要如何才能像第28行navbar brand的logo不用給固定寬度就能剛好，目前找不到bootstrap是使用哪個class達成的。
謝謝助教~ (已編輯)

> 助教回覆：
> 1.原因是行內元素會產生本身就會產生空隙喔，可以[參考連結](https://css-tricks.com/fighting-the-space-between-inline-block-elements/)。
>
> 2.border 線條我記得最小好像只能設到 1px，因此你這樣是正常的 (有待確認)。
>
> 3.原因是你在 img 有設 width: 100%，建議可以改成 max-width: 100%，接著你可以把 .w-6 給移除就可以了，至於 .navbar-brand 沒有受到影響的原因是因為他的區塊寬度剛好沒那麼寬，如[圖片](https://imgur.com/a/tLMlMuU)。

---

11. Kent：

焦糖大大您好，想詢問四個問題
圖片滿版父層
來詢問關於昨天的圖片處理後續遇到的問題，有使用 col 的方式去排，嘗試使用兩種圖片載入的方法（img 標籤、background-image）來自適應滿版父層，background-image 部分有成功，但 img 標籤失敗圖片還是會撐大，想詢問如何解決。

想讓左右兩邊區塊的滾動軸獨立
使品項多時滾動軸只做用於左邊的區塊 col-md-8，而右邊的區塊可以繼續保持滿版 整個螢幕的空間，想詢問助教可以怎麼做？

form 表單中的 button 跳頁問題
程式碼連結，這邊有使用 a 標籤來換頁，但沒有換頁反而是送出表單的資料到同一頁中，想問助教如何讓 button 送出資料後並換頁？

background-fixed 問題
程式碼連結，由於 background-fixed 在 ios 裝置上支援不佳，於是使用斷點 background-lg-fixed 來讓他指作用於 992px 以上（新增在 _utilities.scss 當中，且 background 是呈現紅色的字，不曉得是否是有錯誤的意思），但我在手機上看圖片還是和吃到 background-fixed 的樣子一樣（沒有顯示完整圖片），想詢問助教這點如何解決。
作業連結：repo、page (已編輯)

>助教回覆：
>1. 這裡只要把 .h-100 移除，並對 img 圖片設 height: 84px 就可以囉，如[圖片](https://imgur.com/a/akhQu7Q)。
>
>2. 可以在 .card 上面加上 overflow-x: scroll; 如[圖片](https://imgur.com/a/DkiJDJU)。不確定有沒有符合你的預期。另外在 .col-md-8 是不能加上滾動條的，畢竟使用格線系統就是要避免這種問題發生，這樣做反而有點本末倒置(?)。
>
>3. 這邊有二種方法，一種是透過 JavaScript 點擊案後「先送出資料」再來跳轉頁面，另外一種就是都寫在同一個頁面中，並把資料一直傳遞下去，到最後一個步驟再統一送出資料，像是[這個作業](https://ahchih.github.io/week6_homework/checkout.html)，就是沒有跳轉頁面一直延續下去。
>這裡會建議先用 a 標籤加上 .btn 按鈕的樣式就好。
>
>4. 需要用手機檢查 ( 待確認 )

---

12. ZY Hsu：

助教好!
問題一: 我在寫這部分時，先在"選擇課程階級"上寫display:none; 並用jQuery寫toggle 原本預期點擊選擇課程時會正常開合，但不知為何內容會跑版，如果我不加display:none;，就會變正常，但他預設這塊會顯示。(原本有使用BS5摺疊，但一樣會跑版所以才用jQ。另，不知為何只能使用toggle，slideToggle不能用，是版本的問題嗎?)

問題二: 在課程level的三個卡片，我預期能點擊A卡片時，B、C卡片的active(即class="chooseCourse") 會消失，
並做以下語法: $(this).parent().siblings().find('.card').removeClass('chooseCourse');
但並沒有用，想請問助教該如何解。
附上 repo 、page。 (已編輯)

>助教回覆：
>1.slim（輕量版）的 jQuery，是不含動畫的部分，所以 slideToggle 就不能用哩
改為一般的版本就可以囉。
>
>2.這裡只要在每個 function 裡面加上```$('.card').removeClass('chooseCourse')``` 就可以清掉了，如[圖片](https://imgur.com/a/Ny3jo4w)。

---

13. Karen Huang：

助教您好～
這是我的 repo & page

我想要問的第一個問題是，在all.js這邊我是抄同學的，用了這個語法，但在swiper的api文件內，好像也沒找到這個語法? 這個語法是否是從js去控制col的數量的意思？很好奇這個語法該從哪去看(?) 因為在現行版 swiper API 內找不到這語法 :快樂:
slidesPerColumn: 2,
slidesPerColumnFill: "row",

第二個問題是，除了從js去控制col的數量，我可以透過從html結構上去控制BS5格線系統在swiper內的圖片顯示的數量嗎？(從四格變一列)，或這是無解的??? 因為swiper好像自己有自己的格線系統？但目前我還不是很理解它的運作(?) 看文件中講到格線的部分好像也沒有很多？？

第三個問題是，有看到很多同學這個區塊都手機、平板都是用BS5格線系統去做，桌機以上再d-none，然後開啟swiper的方式，雖然是很簡潔，但很好奇這樣是否影響SEO??? 是好的作法嗎？

第四個問題是，我在devl tool 想找出這個區塊的空白是哪裡的，想刪除但找不到@@ 因為會影響我這一區塊的padding-top高度，想問助教這邊應該從哪裡去消除呢(如圖)

> 助教回覆：
>1.這個剛改版似乎已經移除掉了 (待確認)，你可以先參考[這個範例](https://codepen.io/badblakesmith/pen/aPXNxv)，並且更改 slidesPerColumn 的數值來觀察。
>
>2.swiper 有它們自己的格線系統唷，可以參考官網的 Slides Grid，這是它們的[範例](https://codesandbox.io/s/x3e5t)。
>
>3.SEO 比較不會受到影響，這個做法也沒有太大的問題，業界中也很常見，只是會稍微影響效能 (但做得出來總比較好吧 XD)。
>
>4.你指的是這裡嗎 ? 如[圖片](https://imgur.com/a/OYQjm1h)。