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

# 8/13 線上 Slack 助教

## 今日助教輪班時間

JasonLu：8/13 (五)
回覆時間：下午 1:00 -下午 5:00

## 發問規範

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

## 注意

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

## 問題

1.Gillian：老師助教同學們好，這是我的 Codepen（https://codepen.io/gillianyy/pen/RwVvmgR），
我原本預期「HTML 第1行下了"justify-content-lg-center後", 會呈現出"exhibition /signin/ sign out"元素置中」，但卻出現「元素靠左排列 」，想問下問題出在哪裡以及怎麼修改呢？ 非常謝謝你們

> 助教回覆： 這是因為 .navbar-collapse 內設定的 flex-grow:1; 造成的。
> 
> 建議加上.flex-grow-0 來避免區塊佔滿剩餘的空間。 加上 .flex-grow-0 之後畫面預期會變這樣:

---

2.Tori :想問助教一些非程式碼問題，[github repo](https://github.com/aer456987/Art_Exhibition) 、[github pages](https://aer456987.github.io/Art_Exhibition/)

問題一：
1. 第六週首頁的熱門特展區塊，設計稿給的圖片是1x1
我的作法 ( 圖一、圖三 )：
使用 col-4 + overflow-hidden 裁切圖片寬度，圖片高度給 100%，圖片寬度 auto 自適應，col-4 的高度是用文字區塊的高度決定
優點：圖片不會變形，任何螢幕寬度下圖片區塊都能被填滿
缺點：在不同的螢幕寬度下，圖片無法完美呈現1 : 1 比例 ( 圖三 )

2. 照著設計稿圖片比例限制為 1x1 ( 圖二、圖四 )：
優點：圖片比例在任何螢幕寬度下都能維持 1x1 ，符合設計稿
缺點：在特定的螢幕寬度且不改變文字區塊內容的前提下，會因為圖片的高度已經固定，會出現以下兩種問題

螢幕寬度變大時，文字區塊上下 padding 會很大很空 ( 圖二 )

螢幕寬度變小時，文字被擠壓，區塊高度變高，導致圖片下方出現空白 ( 圖四 )，這問題要解決就需要改變文字區塊的呈現內容才行

**這個問題主要是想問問助教，在面對這種圖片比例鎖死的設計稿，會使用 方法1 ( 用文字區塊去決定高度，圖片寬度自適應 ) 還是 方法2 ( 圖片比例比照設計稿 1x1，文字區塊的高度由圖片決定 ) 做撰寫呢？**

助教回覆：
1.助教的寫法會選擇方法一設定高度的方式，如果圖片尺寸沒有辦法和設計稿一樣的話助教會給它設定 350px 的高度讓圖片符合設計稿的高度。要注意對圖片寫固定寬高會有變形的問題，需要對 img 加上 [objcet-fit:cover;](https://wcc723.github.io/development/2020/10/11/img-cover/)

範例:

<div class="col-md-5 col-lg-6 col-xl-4 img-position-center h-3xl h-md-auto">
   <img src="./assets/images/exhibition/exhibition-3.jpg" alt="展覽圖片" >
</div>

img-position-center img {
 height: 345px;
 object-fit: cover;
}

---

3.lumei：助教好 這是我的repo和pages，想請教關於swiper的問題
問題一：為什麼拖拉至下一頁時第一張照片會無法完整顯示呢？ 跟Slides per view 效果看起來有所差異
問題二： 目前寫的程式中最後一張半會無法拖拉顯示，這是為什麼呢？ （swiper程式在index.html 第169行開始)
問題三：想請問在js檔案裡的sliderPerView:4 指的是一頁顯示4張嗎？spaceBetween:30 是margin-right:30px嗎？但像是sliderPerView雖然寫4，是不是也會因為螢幕大小導致最後一張顯示的部分有所差異呢？

助教回覆：
1. 主要是因為在 .swiper-slide 加上了 width:auto !important; 寬度變更為 350px，所以造成拖拉至下一頁時上一張照片會無法完全消失。
區塊滑動時在 .swiper-wrapper 會透過 js 動態設定樣式 transformt:ranslate3d(負的偏移植,0,0) 讓區塊往左平移，偏移值為 .swiper-slide 那一層 js 動態設定的 width、margin-left 相加，以同學的作業為例，偏移植為 -(274px+30px)=-304px
因此，.swiper-slide 350px 往左偏移 304px 會多出 46px 無法完全消失

1.與問題一樣是 width:auto !important; 造成的，建議將 width:auto !important; 移除，並且將 sliderPerView 改成 3
2. sliderPerView:4 指的是在 .swipper-container 同時顯示 4 張幻燈片； spaceBetween:30 指的是 margin-right:30px 沒有錯； sliderPerView 寫 4 的話 會直接影響到 .swiper-slide 的寬度，不會影響到最後一張幻燈片的顯示

對於早上問題的回覆 還是有不太理解的地方想請問
1.問題2的建議是將width:auto !important; 移除，才不會造成最後一張無法拖拉顯示，但移除的話間隔也會一起消失。 因為想要兩者都有，有什麼方式可以達成嗎？
2.問題1提到.swiper-wrappejs 動態設定樣式，這個偏移值是透過什麼工具查看到的呢？

助教回覆：

1. 因為，.guessUlike .card-img-top 圖片有設定寬度，導致溢出 .swiper-slide 造成區塊重疊，所以建議把 .guessUlike .card-img-top 寬度值改成 100%。此外設計稿上 swipper-slide 一次是出現3張，因此建議把 sliderPerView 改成 3
2. 偏移值是透過瀏覽器的開發者工具查看的(下圖紅色區塊)

---

4.Alicia Lo ：JasonLu 助教您好，這是我的[codepen](https://codepen.io/dkcyhyre/pen/eYWXRqd)，想詢問今天的每日任務，為什麼當外層的 .swiper-slide 沒有下 width:auto的語法時(CSS第23行)，裡面的img 不會撐開外層的寬高度呢? 再請助教協助解惑了，謝謝助教~!!

> 助教回覆： 主要有 2 個原因
> 1. 因為在圖片 .card-img-top 有套用到 width:350px; height:350px;的設定，所以 寬度不會占滿 .card
> 2. 因為在 .swiper-slide 那一層有用 style 寫死寬度，所以 div 不會占滿整行
---

5.Karen Huang ：助教你好，這是我的[repo](https://github.com/CodingSnorlax/dashboard/blob/master/app/index.html) 跟 [page](https://codingsnorlax.github.io/dashboard/)
我想請教有關資料結構的問題（如圖），然後我的問題是在 html 內的第34-48行。
就是當我在寫這邊的時候，我把左側的button跟右邊的 2 comments 包在一個div內了，但總感覺好像把這兩個東西塞在一起沒很明確區隔資料類型的感覺，因為一個是屬於button、一個是有關右邊對話欄的註解(?..我也不太確定這要叫什麼)。
會把兩個東西包在一起是因為，我在寫到右邊的時候，如果在 2 comments 又加上一個div，我右邊的對話欄就會擠下去，無法跟左邊button 水平對齊。
所以
第一個問題是：這邊2 comments既然要和左邊對齊，又要不把對話欄擠下的寫法該怎麼做比較好？
第二個問題是：因為這兩個資料是不同的，照理說應該分成兩個div 比較好嗎（？）

助教回覆：
1.可以把 .dropdown 放到 .col-4 裡面和 list-group 放一起； 2 common 放到 .col-8 裡面和 tab-content 放一起。這個做法會要處理 2 commons 與 .dropdown 對齊的問題，需要在 2 commons 設定 line-height:38px 才能讓 2 個區塊高度相同；此外 span 還要加上 d-block、.text-end，讓文字靠右對齊
.`<div class="row" style="
align-items: ;
">

<!-- 左側選單 -->
<div class="col-4">
<div class="dropdown">
<button class="btn btn-white dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
All(4)
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2" style="">
<li><button class="dropdown-item" type="button">Chapter Assignment 1 (1)</button></li>
<li><button class="dropdown-item" type="button">Chapter Assignment 2 (1)</button></li>
<li><button class="dropdown-item" type="button">Final Assignment (2)</button></li>
</ul>
.list-group...
</div>

</div>

<!-- 右側內容 -->
<div class="col-8">
<span class="fs-8 text-gray d-block text-end">2 comments</span> <--- 加上 line-height:38px;
.tab-content
</div>
</div>`

2.助教覺得這邊寫在同一個 div 和 分開來寫都可以。寫在一起處理對齊會比較方便；分開會比較符合資料的邏輯，2種方法各有優點。

---

6.Fred Chang：

1. 不太了解為什麼select和另一個元素在d-flex排版的情況下會占滿整個寬度，但多包一層div就會變元素本身撐開的寬度，附上codepen: 沒包div、有包div。
1. 這是我的Repo、Pages，不曉得為什麼Bootstrap的class="text-right"在index.html的第72.73行沒有作用，所以我在_util.scss先自行定義了，但想了解原因為何。
1. 關於08/10的每日任務，想請問隱藏卷軸最主要是靠css第7行的padding-bottom嗎? 如果是的話就為什麼padding可以覆蓋掉呢?
1. 關於08/11的每日任務，想請問為什麼css的第6行寫before或after都可以呢? 就自己目前的理解是一個在前一個在後，但不清楚為什麼可以顯示在同個地方。

助教回覆：
1.未包 div:因為.form-select 有設定 width:100%，所以身為 flex 內元件的 select 就會占滿剩餘空間。有包 div: 內元件 div 的寬度分配受 flex-basis 影響，在沒有設定 flex-basis 時預設值為 auto，在 auto 時內元件的寬度會由元素內的文字、padding、margin 撐開。若希望 selcet 能占滿剩餘空間可以在 div 加上 flex-grow:1; 或 width:100%。

2. bootstrap 4 版本的 文字對齊是 text-left/right； bootstrap 5 改成 text-start/end 囉，所以要改成 .text-end 才對，這邊提供[文件](https://bootstrap5.hexschool.com/docs/5.0/utilities/text/#text-alignment)給同學

3.隱藏卷軸主要是在 nav-scroller 設定的 overflow-y:hiddn; 達成的

4. befor 或 after 都可以是因為 position:absoulte、top:0;、left:0 設定的偏移都是以父層設定 relative 的 .timeline-section 為基準點。

---

7. YELLA MOON ：
https://kolyfish.github.io/week6task/
https://github.com/kolyfish/week6task
助教，您好，我昨天晚上關電腦前，樣式都還有吃到，但今天開電腦，發現樣式全部跑掉了>>
我把varibable的檔案整理了一遍，把有紅字的地方做整理。但是現在還是ㄧ樣無法正常吃到樣式。

> 助教回覆： 助教在 [gh-pages](https://github.com/kolyfish/week6task/tree/gh-pages/assets)裡沒有看到 style 資料夾，同學可以去 dist 資料夾看有沒有編譯出 all.css　( ./assets/style/all.css )

---

8. zyc ：助教您好，
今天做第6週作業的時候，覺得自己還不是很清楚 BS的 container 和 breakpoint 設定，所以想要整理一下自己不清楚的地方：
根據wk6 的設計稿，
*pc container max-width計算：1280-85-85+30=1140
*mobile container max-width計算：375-15-15+15=360
因此，我的.container一共有4個寬度，想要有3個斷點：
1400 (pc,default)
992 (pad,適用於所有的ipad)
767 (mobile,適用於大部分手機，如 iphone6+ 的414px, iphone6 的375px)
360(mobile-sm,適用於小的手機，如 iphoneSE 的 320px 或其他)
所以，我應該要在_mixin.scss和_grid.scss內這樣設定嗎？（如圖）
問題：
1）這樣設定之後，套用.container 會不會直接依照我的 1140>992>767>360 設定？還是要在對應的 scss 檔內使用 @include 呼叫斷點後再重新寫過一遍code？如果不用 @include 的話瀏覽器是不是還是會依照 BS 的 container 來判斷 container 的 max-width？
2）如果依照上面的設定，BS 的 $grid-breakpoints 還適用嗎？例如在 @include mobile(767px) 的情況下使用 md: 768px（如調用 col-md-4、d-md-flex）會不會無效？ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );
3）還是我想得太複雜了，乾脆都不用設定，直接套用 BS 的.container-fluid 和 .container 就好？

助教回覆：
1.container 除了 992px 會覆蓋，其他的設定都是新增斷點，新增了 1140、767、360px 3 個斷點，建議不要在 container 這樣寫，這次作業的設計稿和有符合 boostrap，建議使用 bootstrap 的 container 就好。
2.$grid-breakpoints 還適用哦! 因為 container 使用的變數是 $container-max-widths
3.助教還是建議同學使用 bootstrap 的 container

---

9.沈依蓉:
請問助教: 這串文字的x軸和y軸該如何算才對？我目前是用目測去抓的但好像不該是這樣 !!
repo: https://github.com/lily-oa/local_art
pages: https://lily-oa.github.io/local_art/

1.設計稿標記的寬度是 65px，而 .detail_date 的寬度大約是 39px，所以會寫成 top:53px; right:26px；(65px-39px)；另外建議把 .detail_date 移到 .detail_picBox 並且對 .detail_picBox 設定 position:relative;

---

10.Sec:
助教好, 想请问 :
不是很了解设计稿的这部分适不适合使用格线系统呢 ?
关于格线系统之前有问过老师 例如: .col-md-6 的同一层是不能加上 padding 或 margin的, 因为加上去后就会换行, 但是为什么 border加上去 不会换行?
`<div class="col-md-6 p-2 border-2"></div>`

1.下圖紅色區塊有可以使用格線系統；綠色區塊的話也可以考慮使用格線系統，因為圖片、文字都有在隔線內
2.border 加上去不會換行哦! 這是因為 box-sizing: border-box; 讓 50% 的寬度包含 border、padding、content(文字內容)。 另外 .border-2 只有設定 border-width 而已，需要加上 .border 當作基底樣式 ，

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

---

11.大衛 :
這是我的repo、page，想請教一下：
1.在聯絡方式(圖1)的地方mail的圖沒有跟字同個高度，但我在scss裡面的130行有寫到vertical-align:middle; ，請問是哪裡需要調整呢？
2.在mobile狀態下(圖2)，mail會跳行，我發現應該是被擠壓到，但我是要自己去改推擠，還是我有哪裡要挑整的，麻煩助教了謝謝(綠色的部分是為了看推擠，忘記改回來XD)
3.footer中間的白線好像在mobile時會變短(圖3)

助教回覆:
1.vertical-align:middle; 需要設定在 img 標籤上。因此建議把 .footer .contactnav_item 設定的 vertical-align:middle; 移到 .footer .contactnav img 上
2.可以將 .footer .socialnav_item 設定的 margin-left 調小，讓 mail 不會換行
3.footer中間的白線在 mobile 會變短有 2 個原因
1. 因為 .footer_statement 寬度會自適應父層，所以當載具縮小時 border也會跟著變短
1. 因為在手機板的時候 container 寬度變成了 345px 所以 白線 的長度也會跟著縮小成 345px

---