---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/26 線上 Slack 助教
## 今日助教輪班時間
Hong di Chen：8/26 (四)
回覆時間：下午 2:00 -下午 6:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1. 穎旻：
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？
> 助教回覆： 因為在....所以..，於是產生 ... 的結果
---
2. Gill
助教好~~~ 這是我的pages、GitHub
想請問以下幾個問題：
1.立即預約頁面我使用了collapse的效果，想請問如何將collapse在pad版跟手機版移動到第一個(首次體驗)card的下方，並且將第二和三個(短期體驗和長期體驗)的card覆蓋掉，達到設計稿的效果呢?
同時也希望再點選第二個(短期體驗)的card也可以出現選擇課程階級的collapse並且覆蓋掉第三個card
2.選擇課程階級這部分在1200px以下且還是3列的狀態下，第二個"中階"的部分就會跑版了，不知道哪邊的問題呢?(圖二)
3.我將做好的專案上傳到pages，以pages點開，但所有頁面的圖片都會不見，而到GitHub上看，是有成功上傳上去的，不知道會是什麼原因呢?(圖三)
> 助教回覆：
> 1.
> 建議以換頁為主，若想挑戰同一頁會建議三張體驗小卡和 選擇課程階級區塊 包裹成一個 div ，透過 flex-wrap 換行，並用 order 決定區塊順序
> 2.
> 建議做成可以滑動的效果（pad）
> 3.
> 是路徑寫錯
> 不是 /assets/images/card-8.jpg
> 而是 assets/images/card-8.jpg
---
3. Kent
助教大大您好，
想詢問關於有兩個地方 space-between 沒有效果的問題：
想詢問這個區塊，space-between 沒有效果，我預期讓這個區塊內的元素可以有 space-between；以及想問這個區塊 input 的寬度可以依照內容來延伸寬度嗎？不然都只能寫死 width 寬度。
以及在手機版時這個區塊，space-between 沒有效果。
關於圖片如何設置高度後，並自適應滿版：
圖片設置高度時，隨著視窗縮放時沒有自適應產生下方空白的問題，程式碼連結。
文字切齊邊界的問題：
問題頁面，想詢問是否一定要設置寬度才有效果（嘗試使用 word-break: break-all; 但沒有效用）
再勞煩助教幫我解答:man-bowing:
作業連結：repo、page
> 助教回覆：
> 1.
> 可以給固定寬度
> 2.
```css=
{
object-fit: cover;
height: 100%;
}
```
> 3. 是，設定最大寬度 350px
---
4. zyc
助教你好，
1）為什麼內容會超出 modal 的範圍？.modal-content 是用 padding 推擠出寬度，預期中不是應該可以包住內容嗎？請見 repo、pages（需點擊「基礎 Basic 卡片」）。
2）如何解決 radio 無法取消點擊的問題？請見 repo、pages。
3）問題：Swiper 設定斷點顯示的數量，卻會跟其他頁面的 swiper 打架。
例如，在 space-intro.html 的課程推薦區塊使用了 swiper，所以在 all.js code 內設定了lg斷點顯示 4.3 張卡片。但是在 course-intro.html 師資介紹的區塊卻希望在 lg 的時候只顯示 4 張卡片（目前也是4.3），請問該怎麼調整讓他只出現4張卡片呢？
而且還有好多個地方還會用到 swiper，但是看不懂套件的每個樣式都用同樣的.mySwiper 包起來，要怎麼改code:sob: 希望助教可以幫忙解惑，讓我在切其他版面的 swiper 時可以隨性調整顯示的數量，謝謝！！
> 助教回覆：
> 1.
> img 需設定 width: 264px;
> 2.
> 需在 input 設定 name 屬性，兩個 name 需同名
> [範例 ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
> 3.
> 不要都叫 .mySwiper ，建議每個區塊 swiper 都有各自的 class name 這樣可以個別調整，可以命名 .space-intro-swiper 和 .course-intro-swiper
```javascript=
var courseIntroSwiper = new Swiper(".course-intro-swiper", {
breakpoints: {
768: {
slidesPerView: 3,
spaceBetween: 30,
},
992: {
slidesPerView: 4.3,
spaceBetween: 20,
},
},
});
var spaceIntroSwiper = new Swiper(".space-intro-swiper", {
breakpoints: {
768: {
slidesPerView: 幾張,
spaceBetween: 30,
},
992: {
slidesPerView: 幾張,
spaceBetween: 20,
},
},
});
```
---
5. debby yeh
助教好，
想要請問圖下的col有那裡觀念錯誤嗎?
code repo
謝謝
@cuboid 助教好，我是5的debby
更新的網址: https://debbyyeh.github.io/week8_yoga/
再麻煩你，謝謝
> 助教回覆：
> 應是 col-md-8 和 col-md-4
> 8:4 -> 4:2
> 6 等分裡面再切 12(8+4) 塊
>
6. YuriT
助教您好, 不知道為什麼 添加了 swiper 我的 web 出現了x軸,
希望助教可以幫忙解惑3QQQ~
> 助教回覆：
```htmlembedded=
<div class="col-6" style="
overflow: hidden;
overflow-x: scroll;
">
...
</div>
```
---
7. 沈依蓉
助教好:
學員的repo: https://github.com/zyan-c/doyoga/blob/797e939d165aec4bfd4f2cc3238e159db58306a6/app/assets/style/helpers/_utilities.scss
請問:
1.她為什麼在這裡設定文字大小，這種設定是什麼意思？且若依她的設定是不是就同時也擁有文字斷點，可以用成fz-md-5的意思呢？(圖一)
> 助教回覆：
對，可以，你可以下載下來測試看看～～
---
8. anna
助教您好~ 紅色這塊比較大所以我給他寫了寬度635px，然後寫了margin-left:-95px把它往左推，但是螢幕稍微縮小他就會破版，該怎麼處理這一塊呢?
回上面的~ 師資那塊卡片會破版~
還有精心設計課程的swiper要如何讓他貼齊視窗右邊呢? 目前是包在container裡，但把它移出container又會影響到左邊排版
> 助教回覆：不建議將寬度寫死，可以用 padding 調整
> 且頭像會放大（圖片的話寬高可以照設計稿設定）
> 可用 container-fluid 去訂 swiper 層，然後文字區塊用定位疊在上面，這裡提供 葉子助教的 [CodePen](https://codepen.io/TzuHui/full/jOwPNjR)
---
9. 蔡明達
助教您好
Repo
Page
上半部與下半部無法準確對齊（如橘色框所示）
使用 Flex-end 依然無法使區塊靠右
> 助教回覆：
> 1.
> 建議 腳踏車圖片 與 其下方的 navbar 寫在同一個 div，或是圖片與下方的 navbar 寬度都設 50%
> 2.
> col-5 外建議多包一個 div 來 flex-end
---
10. 袁祥恩
助教您好～
repo
page
我在 swiper 部分，改了swiper class名稱之後，整個覆蓋到左邊的部分,不知道問題在哪兒～
index.html 第155行
index.scss 第58行
all.js 第四行
> 助教回覆：
```css=
.col-md-6 {
overflow: hidden;
overflow-x: scroll;
}
```
個人沒看到覆蓋到左邊，同學確認一下
---
11. roger
助教你好，我想請問這區塊的圖片在手機板、平板和桌機板每個高度都不同，目前有想到在各個裝置上寫死高度，
請問助教如果不寫死高度，有沒有其他比較好的寫法? 再麻煩助教給予建議，謝謝
我的 pages
> 助教回覆：
> 圖片寫死高度沒關係，是文字內容區塊不能寫死高度
因為，圖片寫死高度基本上不會造成破版，而內容區塊不能保證裡面文字的多寡，所以不建議寫死區塊高度。
---
12. debbie
助教你好,
問題1: import :variables.scss gulp 報錯訊息:
Error in plugin "sass"
Message:
app\assets\style\helpers\_variables.scss
Error: no mixin named -assert-ascending
on line 322 of app/assets/style/helpers/_variables.scss
from line 4 of app/assets/style/all.scss
>> @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
---------^
問題2: 送上github, 發現圖片連結不到?
以上2個問題,謝謝
> 助教回覆：
> 1. 建議重開看看，我嘗試下載你的 code 沒有上述問題
> 2. 圖片問題：
> 路徑錯誤
> 是這樣
```
url(../../assets/images/photo-1612157777902-5382bc6e864b.jpeg)
```
> 不是這樣
```
url(../../../assets/images/photo-1612157777902-5382bc6e864b.jpeg)
```
---
13. 袁祥恩
助教您好～
repo
page
我在 另一個 customer swiper 的部分，在 ipad畫面 使用swiper 套件 也改class名稱，但是效果沒有出來～
index.html 第385行
index.scss 第82行
all.js 第13行
> 助教回覆：
> 有 breakpoints 這個設定，可以參考一下
```javascript=
onst swiper = new Swiper('.swiper', {
// Default parameters
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
})
```
---
14. 軒仔
助教好
我用bs5客製化標籤沒有效果
codepen:https://codepen.io/loking23/pen/YzQXKbx
> 助教回覆：
> 用 CDN 載入是不能使用 mixin 的，因為 CDN 是 SCSS 編譯後的結果是 CSS 樣式
---
15. 大衛
老師助教同學們好，這是我的 GitHub repo、GitHub Pages，如下圖
1.我在mobile裝置下圖片無法佔滿空間
2.圖中的文字無法置中，使用position+top50%+left50%但字體會消失 (edited)
> 助教回覆：
> .class_card_img 的 max-width:58% 要修改成 100%
> position: relative; 是給 父層 li
> .class_card_title 除了 absolute 需額外設置
```css=
.class_card_title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
---
16. Evan MH
您好, 想速速請問一下一般來說,當我用一份新的css檔案覆蓋掉舊的那份(如圖)
不就應該連結到新的那份嗎？
我剛這樣debug了好久想說為什麼改的code一直有問題,後來才發現他還是有連到舊的那份
這是正常嗎？就算是新的放下面覆蓋舊的檔案,他還是會算權重決定要去follow哪一份的嗎？
抱歉沒有codepen file,他好像不能上傳兩個css file吧？
> 助教回覆： 第一不是權重問題，第二是兩份 CSS 都有連結，第三的確有覆蓋，但是，是覆蓋新的那份**有同樣 class** 且**有設置同樣樣式**的，例如 .menu max-width: 1920px; ， 在你的圖片上 style.css 的確有將此行劃掉，即使新的 style2.css max-width 也是設同樣的值
---
Sign in with Wallet
Connect another wallet