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

# 9/2 線上 Slack 助教

## 今日助教輪班時間

焦糖：9/2 (四)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

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

## 注意

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

## 問題

1. will：
老師助教同學們好，想問兩題
1.我在研究將好用boostrap的部分客製化，看到官網的utility是這樣撰寫，但實際丟到codepen無法生成，這是我的 Codepen（連結）
研究一下sass map好像也沒有看到相關語法，所以這種比較簡潔的語法是bs自己用js寫的嗎，我自己有辦法實現嗎
2.請問該如何使勇npm安裝swiper，我實際照官網步驟都會報錯，後來發現是js無法import他的資料來源，有相關的關鍵字或解法教學嗎，目前都先用cdn帶入，想學一下npm安裝

> 助教回覆：

1. Bootstrap 在 CodePen 上是屬於使用 cdn 的方式，因此已經是編譯完成的狀態，無法再自己修改變數。另外這種寫法你可以[參考這一篇文章](https://wcc723.github.io/css/2016/12/25/sass-map/)。

2. swiper 是可以利用 npm 來引入的沒錯，但不確定你是如何引入的。可否再提供範例呢 ?

---

2. lumei：
我原本預期在body下overflow-x: hidden 可以解決所有AOS產生空白和x軸的原因，但在pad和手機版會出現，
讓我疑惑的還有像是 首頁滑到精心設計區塊就會恢復正常了？空白只會在pad和手機版才出現？
再請助教解答了，謝謝:respect:

> 助教回覆：原因是你有使用到 fade-right 的關係，會導致還沒滑到那個區塊，那個區塊隱藏在畫面右邊 (超過原本畫面的寬度了，所以才會產生 x 軸)。解決辦法就是你在 <main> 標籤加上 overflow-x: hidden; 就可以了。
( 補充說明：原因是 overflow-x 要下在容器上面才會有影響，例如像是：main、div、section 等。而 body 標籤並非是一個容器，所以你下在上面並不具有任何效果 )。

---

3. Joy Cheng：
助教你好，這邊附上我的demo | repo
其他部分的swiper 都沒有問題，但是在立即預約的頁面中，點擊選擇課程後，出現的swiper 會跑版，如果直接改變視窗大小，就會變回原本的設定，變正常，想請問助教這邊不知道是遇到哪方面的問題
> 助教回覆：因為這是 Swiper 剛好改版的關係( 變成 7.x 版本 )，因此 class 的用法有些改變，.swiper-container 要修改成 --> .swiper 這樣就可以了，你再試試看。[官方文件](https://swiperjs.com/get-started)

---

4. roger chuang：
助教你好，我想請問為什麼我在感受身心這區塊的卡片上加上 rounded-pill 效果會吃不到我的設定。
還請助教解答 謝謝 我的pages

> 助教回覆：.rounded-pill 是有正確的吃到數值的喔，只是你加在外層 div 不太明顯，建議可以加在 img 標籤上，如[圖片](https://imgur.com/a/AhALaLm)。

---

5. Kent：
焦糖大大您好，
想詢問如何隱藏 scrollbar ，使其在滾動時不會顯示？
> 助教回覆：這裡不建議使用 col + overflow 的方式來製作喔，會建議使用 swiper 套件來完成這一區塊

---

6. will：
助教午安，上述問的第二題，就是在官網教學的Install from NPM中
https://swiperjs.com/get-started
實際執行會報錯
步驟
npm install swiper
import Swiper from 'swiper';import 'swiper/css';const swiper = new Swiper(...);貼進去all.js
加入html結構與css結構
我自己推測是import語法問題，請問該如何節舉此問題～～麻煩助教惹

> 助教回覆： import 是要編譯，所以用 gulp 的話，是要在 envOption 那邊加上喔。

---

7. Page Shih：
老師助教同學們好，這是我的 gh repo 和 gh page，在「精心設計、課程多元」這個部分圖片我使用swiper，並在圖片上面設定flex-basis讓他固定寬度，但就是會變成到第三張圖片就沒辦法再拉過去（如影片所示），寬度如果沒有設定的話，圖片就正常可以拉動，請問這部分可以怎麼調整呢？謝謝！(CDN已經有換成之前討論串可以正常運行的版本，但這邊的問題不管哪個CDN都有出現）

> 助教回覆：這裡請不要使用 flex-basis 來調整 .swiper-slide，因為它整體的寬度再透過 js 設定的時候就已經分配好了，這裡會建議移除掉，並且把 slidesPerView: 2 修改成 --> 1.34 就可以了，你再試試看。

---

8. Karen Huang：
助教你好，我想請問有關boostrap格線系統的觀念，然後程式碼在codepen：
之前上課有聽到老師說，col外一定要是row，但我昨天自己在試格線系統，我想要做出平板以上的一邊是照片，一邊是色塊區域然後可以切割出2個col-6區塊，結果我在html第七行的地方嘗試要加入row，要切割出兩個col-6卻失敗了，會變成是一個col-6內塞兩個文字，反倒是我目前沒有在第七行加row，卻是成功的？？有看過Boostrap文件但還是不確定原因。
我的第一個問題是，我想在平板以上的色塊區域內再切出兩個col-6，目前這樣的寫法是對的嗎？
第二個問題是，這樣的寫法在文件上是屬於Column wrapping嗎？

>助教回覆：有點不太懂你的意思，因為我看左邊文字是已經有二個 col-6 了，如[圖片](https://imgur.com/a/lajKVqq)。如果可以的話請附上失敗的 CodePen 讓我看一下。
>
>Column wrapping 是指說超過格線系統的 12 會被遞延到底下去，例如官網的範例是 .col-9 + .col-4 + .col-6，那麼因為 9 + 4 > 12 所以 .col-4 跟 .col-6 就會被遞延下去。