---
# System prepended metadata

title: 8/17 線上 Slack 助教
tags: [網頁切版直播班 - 2021 夏季班]

---

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

# 8/17 線上 Slack 助教


## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. 沈依蓉：

助教您好:
要怎麼做它左邊的hover藍色線才會不跳動？
Codepen: https://codepen.io/lily-oa/pen/VwbNGpX?editors=1100
我想做出像同學作品左邊區塊的hover滑動效果但我的會一直跳
同學作品: https://aer456987.github.io/admin_week5/#

> 助教回覆：助教有使用你的 CodePen 下去修改，可以[參考我的作法](https://codepen.io/yen-kg/pen/abWrVzM?editors=1100)。

---

2. Karen Huang：

助教你好，這是我的 repo 和 page:
我的第一個問題是，在視窗768~992px之間，我的熱門展覽的圖片會跑版，是否是因為我在img上設定 ratio 1x1 的關係？那我應該如何解決這個破圖問題，又可維持圖片在各視窗使寸下的正常顯示呢？

第二個問題是：我的子導覽列，即html 27-41 行的部分，在手機版上，音樂、戲劇這兩項竟然不會顯示...然後實際用手機(iphone 7plus)測試也怪怪的，我的寫法是套用8/10的每日任務，但結構略有不同，我用 ul li 來包nav，不曉得是否是這個原因(?)

第三個問題是，我的主視覺按鈕(html 16-18行) 在手機版目前是w-50，有看助教影片說明，要做ｍｄ尺寸的時候要另外寫mixin，但我因是用bs-5 fix版本，沒辦法用mixin，想請教助教有沒有其他辦法也能不透過mixin 寫出平板以上的button 正常尺寸(?)
以上三個問題，謝謝助教

> 助教回覆：
> 1.首先這裡你先在 body 內對 img 標籤下 { max-width: 100%; height: auto } 做全域設定，接著把 .ratio 的相關設定都移除掉，然後對 img 標籤與外層 div 下 height: 100%，如[圖片](https://imgur.com/a/d5sUqvw)。 最後圖片的高度就會填滿區塊囉！[如圖](https://imgur.com/a/YwRFMnn)，你在試試看。
>
> 2.這個在 .subNavList 把 justify-content-center 修改成 --> justify-content-md-center 就可以解決囉！
>
> 3.若不使用 @mixin 的話，會建議把按鈕上面的 .w-50 拿掉，然後利用 padding 推擠出按鈕的寬高，再針對斷點去修改就好。

---

3. 周周：

助教您好~因問題比較多，我有把問題放在HackMD裡，再麻煩助教協助確認，感謝助教。

> 助教回覆：
>
> 1.有看到你設定 .w-50，它也有正確吃到這個屬性。只是這二個按鈕設定 width: 50% 是沒有辦法並排的喔！因為這二個按鈕之間有一點距離，因此不能設剛剛好 50%，你可以調整 49% 留一點空間就可以並排了。
>
> 2.這裡有看到你設定 .d-md-none，這一段的 CSS 是這樣的：
> @media (min-width: 768px) { .d-md-none: display:none } 也就是說它的解析度要大於 768px 才會觸發，所以自然手機不會隱藏哩！若要隱藏可以先下 .d-none，等到想要某個解析度要顯示時再使用 .d-*-block 就好了。
>
> 3.已解決
>
> 4.原因是 .d-none 是 { display: none !important } 的意思喔，所以你要加上 .d-md-block 電腦版才會顯示。
>
> 5.我在這裡有看到你使用 Swiper 來製作，這樣是不對的喔！這裡只會利用到 overflow-x: auto; 來產生橫向的 x 軸，不會使用 Swiper 套件，可以[參考範例](https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-x)。
>
> 6.這裡不太確定你指的首頁沒有置中是哪裡呢 ? 因為你有下 .container 整個版型是置中沒有問題的，[如圖](https://imgur.com/a/yjwrONL)。在麻煩你說詳細一點唷 ><

---

4. Kent：

焦糖大您好，
想請問關於第五週切版，問題我放在 notion 裡頭附上照片以及對應的程式碼連結，再勞煩您解答了
https://kentclark.notion.site/e8fdd65afc244b4799b6eb396f808ee6
作業連結 repo、page

> 
**Admin：**
> 1.這個可以參考 Bootstrap Modal 的 Toggle between modals 來進行切換喔！
>
> 2.符號的話，那是因為一開始 class 沒有加上 collapsed，補上去就可以囉！
>
> 3.這個可以[參考這個網站](https://botmonster.com/jquery-bootpag/#.YRtq_IgzaUk)的方式唷。
>
**Assignment：**
> 1.這個可以使用 jQuery 的 slideDown()，[參考範例](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slideup_slidedown)。
> 
> 2.會有間距是因為字體的 line-height 所產生的，對著文字的外層 div 下 line-height: 0px 就會發現沒有距離哩，如[圖片](https://imgur.com/a/9rzf8pW)。

**BS 元件覆蓋：**
>1.這樣子寫是沒有問題的，但如果你想要把它們都拆開來分別各寫一個 .scss 也是可以。( 是我的話會想要拆開，這樣之後維護會比較能夠快速的知道改了什麼 )
>
>2.若要覆蓋樣式的話，會建議加上註解喔！例如這一段覆蓋是覆蓋在哪裡的內容，會建議用備註的方式來提醒，不然很多頁面常常覆蓋到最後會很亂。另外你這樣寫是沒有問題的，最主要還是要蓋的過去才是重點 XD
>
>3.若其他頁面也會使用到的話，可以拉出來 ~

---

5. Elaine Liu：

助教好，這是我的 repo 和 pages，我只有設按鈕的寬度，沒有設定區塊或容器的寬度，但不知為何，在響應式時會出現 x 軸（如下兩張圖），不知問題出在哪？是 HTML 結構有問題嗎？

補充：剛做了一些測試，應該是因為 BS 是從手機寫起的關係（我目前用的 calss 也沒有寫任何斷點），所以當我從大螢幕拉到小螢幕才會產生 x 軸，不曉得我的理解有沒有錯？還請助教解惑，感謝。 (已編輯) 

> 助教回覆：會有 x 軸的問題是因為你加上了 .offset-md-1，因此在 768px 以上時會產生 margin-left，這裡移除掉就好了，可以利用 .col 來製作。另外提醒一個比較重要的地方，就是在 .row 之後一定要接著使用 .col-* 才對喔！

---

6. zyc：
焦糖助教您好，想針對8/11和8/12的每日任務來確認一下基本的CSS觀念是否有誤><

8/11 每日任務（偽元素）
問題1）transform: translate(-50%,-25%); 其中 y 軸的 25%怎麼來的？（我是先用肉眼判斷 x 或 y 軸是否偏移，然後才來設定是對的嗎？還是有更系統一點的方法？）
我的理解是，當設定 absolute 並調整 top/right/left/bottom 的時候需要用 transform:translate(x,y) 來矯正 top/right/left/bottom 的位置。 例如，top/bottom 的值若是正值或負值，在 translate x 就要加入相對的正負值。像是如果設定 top:50%; 則必須 translate(-50%,0);、top:-50%; 則必須 translate(50%,0); 這個概念對嗎？

問題2）為什麼要設定 left：50%？我嘗試在 codepen 移除 left:50%; 然後加入 transform: translate(0,-25%); 也有一樣的效果。這樣也可以對嗎？附上 codepen連結

問題3）請問焦糖助教自己在設定 absolute 的時候也會先用肉眼判斷是否要更改 top/right/left/bottom 的值嗎XD？

8/12 每日任務（fixed modal）

問題1）為什麼要設定transform: translate3d(0%, 0, 0);？從 devtool 刪除這個屬性似乎沒有變化。

問題2）.modal.right 這樣宣告是什麼意思？為什麼.modal-dialog 前面要有空格？
就我的理解，先使用組合式宣告 .modal.right(.modal和.right之間無空格)+層疊式宣告 .modal-dialog（.modal-dialog前面有空格），是因為「當開啟 .modal-dialog 的區塊，又偵測到父層 .modal.right 的話，才會啟動.modal.right .modal-dialog{..} 裡面的樣式」？所以如果有另一個同樣的modal區塊，但是沒有 .right 這個 class 的話，就不會啟動 pos:fixed, top:0, right:0..略 這個樣式設定對吧？

問題3）那為什麼 css 內不直接寫成組合式 .modal.right.modal-dialog{}？
謝謝助教～

> 
**8/11 每日任務：**
> 1.對的沒有錯喔，transform:translate(x,y) 簡單來說就是用來矯正位置用的，讓其元素的位置可以更正確。
>
> 2.這裡不建議使用 transform: translate(0,-25%); 來取代原本的 left: 50%，雖然產生的效果都一樣。原因是 transform: translate 最主要還是拿來做動畫用的，且一些早期的瀏覽器並無支援此語法，position: absolute; 則沒有這個問題，可以[參考連結](https://stackoverflow.com/questions/41335370/position-relative-vs-transform-translate)。
> 
> 3.會先用肉眼判斷，然後再慢慢調整到對的位置。
> 
**8/12 每日任務：**
> 1.其實是有變化的喔，它蓋掉Modal 出現時的位移動畫設定。
>
> 2.簡單來說 .modal.right .modal-dialog 這一段意思是 --> 選取.modal.right 裡面的 .modal-dialog。如果寫成 .modal.right.modal-dialog 的話就會變成選取到最外層的 .modal-dialo 所以是不對的喔！

--- 

7. Alicia Lo：

焦糖助教您好: 這是我的Github repo和 Github page。以下有兩個問題想請問助教:
1.昨天有詢問關於 BS 文字斷點的問題，有依照昨天當日助教建議將預設的 rfs: true, 刪去，確認編譯狀況後，發現文字斷點並沒有正確的編譯出來，但是編譯器沒有任何報錯訊息，修改其他SCSS檔也可以成功編譯，但文字斷點加上 responsive: true 卻沒辦法成功編譯。不確定是哪裡出了問題:含淚大笑的臉:

2.(a)有關於 index.html 的第24~54行，我希望 hover 到 .nav-link 時可以讓底線(border-bottom) 不要那麼快出現(類似淡入淡出效果)，因此下了 transition漸變語法，但發現用all 的話，會連同顏色也做漸變效果，但改成指定只有border-bottom(_index.scss第22行)，顏色依然會有漸變效果。(b)另外也有發現，hover 出現 border-bottom，會因為新增的 border高度而推擠到外層nav的高度，導致畫面看起來像在抽動。原本想改成不會占據空間的outline，但 outline似乎沒辦法設定只有單邊。想詢問助教，關於這兩個問題會建議如何處理呢?
再麻煩助教了，謝謝助教~!

> 助教回覆：
>
>1：待釐清 ...
>
>2：你的 border-color 不要使用變數就可以囉，因為 $secondary 似乎有改到會變成 #E31277 這個粉紅的顏色 XD。另外一個問題可以在 .nav-link 加上 border-bottom: 1px solid transparent;(透明) 就可以解決抖動問題了


---

8. Karen Huang

Dear 助教好，這是我的 repo 和 page：
剛剛已經有收到稍早的回覆，然後我的三個問題有依序去調整了，但我仍有疑問。

第一個問題是，根據你剛剛回覆給我的作法，我在把ratio拿掉後，因為圖片就不會是1x1，也就不會是像設計稿一樣的正方形顯示方式了，所以不管我在任何尺寸底下，都會是這種樣子...也就是跟設計稿不一樣，我很困惑，應該要怎樣才能讓我的圖片在各種尺寸底下都是 1x1 但又不會破版？或不會跟設計稿一樣是正常的？

第二個問題是：關於子導覽列的問題，根據你剛剛回覆給我的作法，我有把justify-content-between 拿掉，可是變成在平板以上的尺寸，我的子導覽列就不會在銀幕正中央，會齊左了...我有試圖在subNavList這邊下margin: 0 auto; 好像也無法使子導覽列置中！

第三個問題是：我已有在 base 下 padding: 0, margin: 0，希望用全域的方式讓所有容器內部都可以還原為預設狀態，但我發現我的card(因為是抓BS5的component來用)，裡面還是有一些不明來源的padding, margin 空隙，看dev tool 發現是bs5預設內建的。
我的問題3-1是，為什麼我在base這樣寫，仍然會被BS5變數覆蓋？
問題3-2是，如果是助教你自己本身的話，會怎麼處理這些系統預設的空隙問題？感覺好像不能不管它？因為這樣寫起來總感覺會與設計稿上有誤差！（一直很堅持要跟設計稿一樣但一直做不到很懊惱的人）:快樂:

第四個問題是：我有在innerExhibitionDate(html 第77行)，下fs-lg-1，希望在桌機版的時候，字體大小可以變大，但卻沒有反應，不知道原因出在哪！
以上問題還是好多 >< 謝謝助教解惑！

> 助教回覆：
>
> 1.若要讓圖片都是維持正方型，只能寫死寬高 { width: 350px; height: 350px }，但這樣做因為外層有下 .col-md-8 的關係，所以一定會造成破版。除非要針對 .col-md-8 來做修改寬度，因此這裡先不需要跟設計稿一樣唷 (我目前也沒有看到任何作業做到寬高二個都剛好 350px XD )。
>
> 2.可以把 justify-content-md-center 可以修改成 --> justify-content-md-center。
> 
> 3.在 _base.scss 有看到你對 body 下 { margin: 0px 與 padding: 0px }，但其實 Bootstrap 其實本來就有對 body 下 margin: 0px 了，這邊你是指想要清除所有標籤預設的距離嗎 ? 如果是的話可以利用 [reset.css](https://meyerweb.com/eric/tools/css/reset/) 來清除唷。
> 
> 這裡會直接加上 reset.css 來清除瀏覽器的預設就好了。
>
>4.Bootstrap 沒有 .fs-lg-1 這個 class 喔 ( 除非是自己新增的 )。只有 .fs-1 而已 ~
>
---

9. ChuanMing：

老師及助教大大好，我想請教一下Gulp的問題，我是win系統
npm install  是每一次我要執行新專案的時候都要重新執行安裝過嗎?
就假設我第二週任務已經執行完了，要執行第三週，那我一樣是再抓一次資料夾下來 > cd 資料夾路徑 npm  install  > 然後執行Gulp  >  接著就是跑一次原始碼跟網頁的佈署流程 >

> 助教回覆：每一次執行新的專案都要 npm install 沒有錯喔，也要重複所有的步驟。第二週若執行過一次，第三週也要再執行一次。

---

10. 軒仔：

助教好，我想問每日任務，不知道為什麼我使用right和bottom屬性無法讓keyframe動起來
codepen: https://codepen.io/loking23/pen/qBmGxXJ

> 助教回覆：因為你 @keyframes example 裡面的 top、left 都是 0 沒有設定唷 ~

---

11. Jiang V：

助教您好，我想請問 overlay 這個區塊，我的透明度好像連同文字、人像圖片、按鈕都一起透明了，這裡需要怎麼調整程式碼才不會影響到人像圖片、文字、按鈕呢？這是我的 repo / gh-pages，再麻煩助教解惑，謝謝

> 助教回覆：這裡不會使用到遮罩的效果，因此 .card-img-overlay 與其他相關屬性都先移除。這裡直接對 .open-talk 的 background-color 下 #190014CC 就可以了，[如圖](https://imgur.com/a/db3ooEC)。

---

12. Sec：

助教好，想请问在首页的 footer banner 的 input-group 为什么在手机版的时候会换行, 是不是要改 input-group 的 flex-wrap: none?

> 助教回覆：我這邊檢查你的 .input-group 在手機版 375px 下看是沒有換行的欸，如[圖片](https://imgur.com/a/U4KCfZp)。能否利用截圖給我看看呢，或是你指的地方不是這裡。另外如果有換行的話，可以試著下 .flex-nowrap 解決試試看。

---

13. 童筱涵：

助教你好，想請教幾個問題～

＊assignment頁面
assignment.html 137行 editor的部分

1.editor的textarea區域高度該怎麼調整讓他有高度

2.reply跟cancel兩個按鈕一直在外面，有參考過其他助教，但改不過來讓他放進去

3.editor的邊框能修改嗎，還是我應該放在li裡面，但放進去我找不到讓他滿版的方法，試過用js添加樣式改padding但行不通

＊admin頁面

1.個人資訊 index.html 201行那邊，我想讓照片跟旁邊verified是切齊的，我用開發人員工具看是照片沒有滿版的關係，請問該怎麼調整呢

2.在add new admin的modal裡， index.html 317行，想問說點擊label的話應該會focus在input，我有寫對應的label for跟id，但我這邊點擊是沒有反應的，跟我預期的不太一樣

3.分頁部分的hover，左右箭頭的白色出不來，不知道是否是我寫錯了ＱＱ

> 助教回覆：
> 
> **assignment頁面**：
> 1.建議直接在 .ck-placeholder 加上 height 就可以囉。
>
> 2.這裡我是利用絕對定位的方式，將按鈕放在裡面。首先 .ck-placeholder 我先改成 height: 200px，接著在按鈕的最外層加上 position: absolute; top: 200px (.ck-placeholder 的高度); right: 20px; 最後出來的成果就會像這樣，[如圖](https://imgur.com/a/tCTxXhB)。你再試試看唷 ~
>
> 3.想要確認一下 editor 是指哪裡呢? 可否再詳細說明是第幾行 >< 或是截圖告訴我是哪個區塊
> 
> **admin頁面**：
> 1.這裡有二個解決辦法。第一是把圖片的 height: 141px 拿掉。第二是調整右邊區塊的 margin 讓高度跟左邊圖片一樣，例如 emir.wicks@mail.com 這一段文字的 margin-bottom: 16px --> 可以修改為 margin-bottom: 12px。
>
> 2.這裡不要使用 addnewName 跟 addnewEmail。原因 id 是唯一值不會有二個，你在 Edit Modal 已經有使用過了，不可以重複使用唷。
> 
> 3.這裡會建議對箭頭直接寫 hover 時的顏色唷。不要直接使用 .text-success，因為它有下 !important 不管有沒有觸碰到都會是 .text-success 的顏色。