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

# 8/9 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. Karen Huang ：
我在寫「情人特別企劃」這一頁的時候，有三個問題：

1.在第99行，我的.blogValentineMain寬度是設定74.5%，但裡面的img寬度卻是804.59px，可是其實設計稿的img寬度是要求825px，我不太理解問題出在哪，因為看設計稿，這個容器的確是佔四分之三的空間沒錯呀～

2.在第226行，我的.tagSidebar寬度設定是25.5%，希望這兩個容器加起來剛好width是100%，但我想可能是因為，這兩個容器中間卡了30px的間距的關係，我在設定tag 之間的間距，如果設定margin-right: 24px，我的 #interview這個tag就會跑到第三列去，就跟設計稿的要求不一樣了...目前我只好先設定22px，但很想知道，要怎樣才能像設計稿一樣，tag之間的間距維持24px，且能不跑版？

3.在手機版的時候，我的街頭潮人物訪問這個btn的上一篇跟下一篇沒有齊左，想知道原因在哪？因為都確認過沒有打到空白。
以上問題，再麻煩助教了，謝謝～

4.在寫這個網頁的時候，有時候會有一些東西在不同頁面會重複，是否這樣的東西適合另外開一個component.scss來放？例如像是部落格、常見問題的這種大標題？或是pagination這種的？或是像部落格頁和情人特別企劃裡面有一條鏡框小知識nav bar，不曉得這種在不同頁面可共用的物件應該放哪裡合適？

>助教回覆：
>
>1.原因是因為受到 .container 的 padding: 0 15px 的影響，你可以試著把 padding: 0 15px 移除看看。會發現左邊的區塊會是 826px 左右。因此會建議將 .blogValentineMain margin-right: 30px 改成 padding-right: 30px，把 30px 加回去，這樣左邊的區塊就會是 826px 囉！
>
>2.若依照第一點修改，就會發現跟設計稿一樣囉！( li 的 margin-right 記得改成 24px )。
>
>3.原因是 .lastPageBtn 沒有加上 display: flex，因為 span 是行內，兩個行內並排時本身就會帶有空隙，可以[參考範例](https://css-tricks.com/fighting-the-space-between-inline-block-elements/)。
>
>4.如果是共同的元件可以放在 component.scss 裡面唷，像是你舉例的 pagination、鏡框小知識 nav bar 等，都可以放在裡面重複使用。
>
---

2. 沈依蓉：

兩個問題:
1.我想設定767以下時nav_menu的nav_item都要隱藏但，在我縮到560時，nav_item就會自己跑出來，要如何改設定才能讓它(nav_item)767以下到375都可以隱藏？我有試著再多加一個斷點375(mobile-s)可是在這個斷點時它一樣無法隱藏!!

2.我想將(.message)標籤在767時往左推26px可是都吃不到我的設定，只有在我全域設定
Body{ padding: 0 15px;}才可以讓.message區塊往左推，請問在_navbar.scss要如何設定才對？
是因為我有在.message區塊設定position-relative，在.badge設position-absolute才會推不動嗎？

>助教回覆：
>
>1.把 .d-sm-none 改成 .d-none 就解決哩 ~
>
>2.我這邊直接在 .nav_menu 加上 margin-right: 24px; 就解決了，[如圖](https://imgur.com/a/jCtkuhc)。(另外補充，相對定位跟絕對定位不會影響到 margin 的推擠唷)

---

3. .lumei：

助教您好，這是我的repo和pages ，原本預期在index.html 第168行的寫法會讓multicollapse成功讓mark as read那行消失，但實際上好像要多包一層div才能成功，請問這是為什麼呢？附上失敗的multicollapse圖示

>助教回覆：
如果再包一層 div 就可以，目前有想到兩種可能
一個是 collapse 包在同一個 div 下就可以做切換
第二個是可能變成同一層，所以可以蓋過它
建議把加一層 div 且成功的範例提供一下，這樣會比較好去比對並找出差異和你說明唷 ~

---

4. 軒仔：

助教您好，我想請問rem的問題，我用bs5預設的rem來推擠，但我發現rem推出來的單位好像會有誤差，mb-1推擠應該是1rem*0.25 = 16px*0.25 = 4px 但實際上推出來會是5，其他推擠會更嚴重，像是mb-4應該是16px*1.5 = 32px，但實際上看到是推40px

>助教回覆：我這邊看到 .mb-1 是 4px 沒有錯耶，[如圖](https://imgur.com/a/CKVQFSc)。.mb-4 我這邊看也是 24px，可否再利用截圖來讓我看看呢?

>助教您好：底下是我的截圖，我這邊看mb-3是推20px

mb-1的截圖

---

5. 哈哈哈哈娜：

我想請問我在寫第五週的後台，想要寫select的樣式
想用after偽元素來呈現設計稿select的三角形
但不知道為什麼偽元素一直跑不出來qq

>助教回覆：select 本身無法透過 ::after 來產生偽元素唷，可以[參考連結](https://stackoverflow.com/questions/3532649/problem-with-select-and-after-with-css-in-webkit)。這裡可以透過 Bootstrap 的 [Dropdowns](https://getbootstrap.com/docs/4.0/components/dropdowns/) 元件來製作。

---

6. Gill：
老師助教同學們好，

1.想請問BS5對於文字大小font-size的部分是直接帶入md或lg就會有響應式的效果嗎? 還是說要自己設定呢?

2.如果是自己設定的話，請問是要在variables地方做設定，還是另開一個scss做設定呢?

>助教回覆：
>
>1.需要自己手動設定唷 ~
>
>2.若是針對響應式來設定的話，會建議另外一支 scss 做設定。直接寫在 variables 反而會造成混亂。