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

# 8/6 線上 Slack 助教

## 今日助教輪班時間

Keng Wei Chu：8/6 (五)
回覆時間：上午 9:00 - 下午 3:00

## 發問規範

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

## 注意

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

## 問題
1. Gill:
老師助教同學們好，這是我的pages，想詢問我的admin.html頁面第98行到第222行是在表單的第一列與visibility的icon會有個modal，發現了以下兩個問題
1.點擊可以成功產生出modal，但要在產生出來的modal上想點擊上面的collaps時modal就會自動消失，再次點擊卻是展開的collaps畫面(如影片1)
2.因為在<tr>下了觸發modal的語法，導致點擊edit的icon時因為也在<tr>內，所以同時也會觸發到visibility的icon產生出來的modal(如影片2)
想請問這部分需要怎麼修改呢?
> 助教回覆：這邊請將 WatchAdminModal 跟 EditAdminModal 挪出 td，可以放到 nav 下方 row ，這樣就能正常呈現摟

2. Kk：
老師助教同學們好，**這是我的 [Github](https://github.com/potatokaka/HexLayout_Dashboard_2021/tree/master)**，我**原本預期**「Bootstrap 樣式會正常顯示」，**但卻出現預期外的結果**「樣式沒抓到，像[這樣](https://potatokaka.github.io/HexLayout_Dashboard_2021/)」，應該是 node modules 和 scss 路徑的問題，想請教該怎麼處理問題？謝謝
> 助教回覆： 
這邊給我的 github pages 沒有問題是有正常呈現的，開啟檔案需是用 gulp 不能直接點開資料夾裡的 html 檔案，下次記得將問題放在 thread 上~~

3. Karen Huang
嗨，助教你好，這是我的 github repo 以及 github page 我在寫眼鏡形象網站的「門市據點」這一頁，有三個問題想請問助教：
我在寫這一頁的五個門市時，用了card來寫，然後我又在card內，把img包在一個div內，因為在台北東區分店的這一張圖，如果沒有外面包div，圖片的高度會跟其他四張不同。此外，我又在img這個元素下了object-fit: cover; 及 width/height: 100%; (scss第81-92行) 這樣拼湊起來，才讓五張圖片高度相同，有點擔心自己這樣是亂湊、觀念不正確，想問助教，為什麼這邊如果我沒有在img外面加div，圖片就會高度不同？因為看BS5的card寫法，它裡面的img也是沒包div的...（然後自己參考很多人的html好像有些也沒包div，但圖片也都能同高，想說除了目前我的這種寫法，是否還有更精簡的？
同樣也是在寫這一頁的五個門市時，我在桌機版的.taipeiCardGroup下了justify-content: space-between; 可是第二列因為只有兩個門市，天母分店無法齊左。目前我先在card上面各加左、右邊的margin 15px(scss第70行)，但這樣又變成我兩邊的card無法貼齊container，想問助教，要怎麼寫，才能讓兩邊的card貼齊container、又能讓天母分店齊左？
最後一個問題是，因為看設計稿的「地址」那一列，文字到第二行的時候是有內縮的，想問在css上，這件事是辦得到的嗎？因為確實覺得目前這樣看起來很不美觀。
以上問題謝謝助教～～麻煩了～～
> 助教回覆：
Q1. img 標籤本身出來的圖片預設為原始圖片的寬高，之前比較沒有這個問題是因為圖片有幫大家切好，這邊加上 width: 100% 沒有問題，讓圖片的寬度為該區塊的 100%，沒有加 div 高度一樣可能是他把高度的設在這邊的 img 標籤上
Q2. 這邊結構上建議使用 ul li，每個 li 都是 33.333%，再加上向內的 padding，flex 的部分不用使用到到 justify-content: space-between;
Q3. 

4. Jiang V
助教您好，延續昨天 的問題，我剛在試，在 _layout.scss 19-27 行，把 content max-width: 984 px; 都改成 width: 984px;
好像就撐開了，這樣做也可以嗎 ?
> 助教回覆： 我覺得可以在 .content 使用 w-100(width: 100%)，這邊應該是在螢幕寬度超過 1200px 上觀看的，因為下了 max-width: 984 px; 所以就不會再延伸了

5. 阿熊
老師助教同學們好
這是我的repo 、 pages
有個關於切換左側nav的問題在layout.ejs 25-62行，從Assignment切換到Admin頁面時，因為會再次加入layout，active會一直跟著一開始設定的.nav-item
有想過要利用<%- current %>這個變數，但不知道要如何利用在html結構外的地方，是否有推薦的文章或關鍵字 謝謝
> 助教回覆： 有關首頁 border 的 code 部分可以參考[這個](https://codepen.io/Valkyrus/pen/vYmVZvY )，[相關文章](https://ithelp.ithome.com.tw/articles/10187106)

6. Karen Huang
如果我的card用ul li 來做，但裡面的電話、營業時間、地址也都是用ul li的話，這樣會不會結構上有問題？（等於是ul li 裡面又包一個ul li？雖然用padding可以解決第二列齊左的問題，但因為設計稿的card是都貼齊container的，這樣是ok的嗎（？）因為就還是會有15px的內間距...
> 助教回覆：
Q1. 可以 li 裡可以用 ul li
Q2. 可以用 margin: 0 -15px 向外增加 taipeiCardGroup 的寬度，這樣每個每個 li 左右多了15px 還是容得下去，可以參考 [gutters](https://bootstrap5.hexschool.com/docs/5.0/layout/gutters/)

7. roger
hi 助教好，想請教助教為什麼我的table表格會被壓縮變得很小無法像設計稿滿版呈現，附上我的 pages 和 repo，再麻煩助教了 謝謝
> 助教回覆： 這邊因為用了 flex 才會導致第一行(直行)怪怪的，建議拿掉 flex 改在 span 用 .align-bottom (vertical-aligns: bottom)即可，修改前後這邊看是滿版喔~~
建議下次截有問題的畫面再把有問題的地方圈起來，我們才會較清楚了解問題

8. lumei
助教您好，這是我的[codePen](https://codepen.io/l_umei/pen/RwVYOLp)
想請問span下面和右邊為什麼會有不明空隙呢？ 我嘗試下display:block過，但看起來不是這個問題
> 助教回覆: 因為 span 是行內元素，所以會有空隙 (行內特性)，可以在 span 外層的 div 加上 display: inline-flex;解決～ [d-inline-flex](https://bootstrap5.hexschool.com/docs/5.0/utilities/display/)

9. Jiang V
@耕緯 助教您好，我預期在 collapse 這個區塊點擊時可以把 button 收合，好像失效，請問要如何調整程式碼呢？
這是我的 repo / gh-pages 再請助教解惑，謝謝 ~
> 助教回覆: 需要透過 JavaScript 去產生下拉是選單，可以參考 7/22、23 每日任務、Bootstrap 中的[互動視窗](https://bootstrap5.hexschool.com/docs/5.0/components/modal/)

10. zyc
助教您好，今天嘗試製作 modal 但是一直顯示不出來。隨後貼上 BS5 官網 modal live demo 的程式碼，也是顯示不出來。請問是什麼原因呢？謝謝
附上 repo，pages。
謝謝～～
我有參考這篇文章，移除和新增過 fade、hide 等 class，也有確認 css 內沒有設定過 modal、fade、hide 等 。
> 助教回覆: 這邊給的 pages 連結錯誤喔，modal 的部分要結合 JavaScript 去產生，toggle 可以參考 7/22、23 每日任務、Bootstrap 中的[互動視窗](https://bootstrap5.hexschool.com/docs/5.0/components/modal/)下方有相關的選項可以用

11. 沈依蓉
助教您好: 請問這顆可以轉變的按鈕該如何做？想問問題的頁面及scss，程式碼304行到348行，在 Modal #adminData 這一個區塊，附上repo， pages
> 助教建議:
這邊可以利用 JavaScript，點擊某個 class 觸發 另一個 class
在 327 行加入 .expandMore ，在 SCSS 中寫入樣式 transform: rotate(180deg);
` $('.expandMore').click(function(event){
$('.expandMore').toggleClass('expandLess');});`

12. 格可
https://codepen.io/catabo/pen/MWmPGmP
助教好，這邊想請教，css第408行那邊要怎麼設定下方的頁數按鍵才會置中? 還有是463行的地方我要怎樣設定才能讓上下一頁的hover變成灰色背景?謝謝
> 助教建議:
Q1. 可以使用 flex 來水平置中、或是使用 width:fit-content 設定寬度(這邊設定寬度為元素寬度)後用 margin: 0 auto; 水平置中
Q2. 在 .page-bar li a:hover 調整 background-color

13. ZengZeng
助教你好～這是我的[codepen](https://codepen.io/tyzyoko/pen/GRmXbXo?editors=1100)
想請教關於第5週作業的問題，目前是直接套用bootstrap的列表，結果發現列表裡的文字、icon稍微偏上(ex.第1、3列)，我想要讓他們置中所以試著在`table`、`th`加入`class=“align-middle”`但都無效，最後加在`span`和`a`裡面才有效(ex.第2列)，想知道為什麼不能在父層直接下class=“align-middle”？有點不太懂這部分運作的原理>也想問問除了在`span`和`a`加入class=“align-middle”這個方法外，還有沒有更簡單or其他的水平置中方法，再麻煩助教解惑了！感謝！
> 助教建議: 用法可以參考[垂直對齊](https://bootstrap5.hexschool.com/docs/5.0/utilities/vertical-align/) Bootstrap 的 align-middle 相當於平常 CSS 在使用的 vertical-align: middle; 只對行內元素有影響，像是 span、 a 標籤，align-middle 垂直置中的方法很簡單搂