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

# 8/5 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. zyc ：
Jason助教您好，附上 [repo](https://github.com/zyan-c/week5-dashboard) 和[ gh-page](https://zyan-c.github.io/week5-dashboard/)，以及 [layout 和 index 的 scss 檔案](https://github.com/zyan-c/week5-dashboard/tree/master/app/assets/style/layout) 。
預計<main>底下的 <nav> 和內容會出現在左邊固定選單 position:fixed 的 <nav> 旁邊。但是現在內容是重疊的狀態，請問該怎麼設定呢，謝謝。
> 助教回覆：
>nav 和 main 標籤會重疊是因為 .nav 有設定 position:fixed;，造成元素脫離原本預設的版面配置。nav標籤脫離了之後 main 會往前遞補位置。
如果不希望重疊的話可以在 <main> 設定 margin-left:296px; (nav標籤的寬度)


---

2. zyc ：我剛剛有重整首頁架構，用 container > row> col 來做最上層的 assignment。預計出現下圖正常的排版，但網頁顯示出來的 container 似乎只有被內容推擠出來的寬度而已….請問為什麼會這樣
> 助教回覆：主要是 <main> 的父層設定 d-flex 造成的，<main> 在成為內元件之後便不會佔滿整行，區塊的寬度會經由 flex-basis 來分配。在沒有設定 flex-basis 時預設值為 auto，這時 <main> 的寬度就會是 <main> 裡面的圖片、文字內容。

有 2 種解決方式:
1. 在 <main> 標籤加上 class w-100
2. 因為 nav標籤 已經 position:fixed ，不會跟著 flex 對齊，所以可以把 <main> 的父層設定的 d-flex 移除，直接讓 <main> 佔滿整行 (下圖)

#其他建議: main.container 建議改為 div.container，因為每個頁面中只能有一個 <main>

---

3.沈依蓉 :
Jason助教您好，附上repo和pages以及layout的scss檔、index的scss檔
有兩個問題:
1.我要如何設定按下按鈕可以返迴或關閉CKEditor的畫面？
2.我發現我將畫面拉到767時sidebar和main兩塊會疊在一起，請問要如何修正才行？

> 助教回覆：

1.主要是因為 main 設定的 position-fixed、nav 的 position-absolute 以及 .sidebar-footer 那一層設定的 .fixed-bottom 造成區塊會重疊，需要在 767px 時切換成 position: initial !important;

修改完之後畫面預期會是這樣:

2.可以在 js 設定: 當 site_item1 被點擊之後 .fadeInUpBig 就消失 (display:none )
$(".site_item1").on("click", function () {
$(".fadeInUpBig").hide();
});

---

4.Gill：我嘗試練習collapse摺疊
總共有三個部分，1和3是預設開啟的，想要在點reply時1和3關閉，2會開啟，顯示的地方是在1和3的位置
不過點擊時沒有反應，想請助教有哪裡需要修改嗎?

> 助教回覆：建議修改區塊 2、3 的 html 結構:
1. 把區塊 3 最外層 div 的 class multi-collapse collapse show 移到內層的 div，這樣在點擊區塊 3 的 reply 按鈕之後 區塊 3才會消失

//3
<div class="d-flex justify-content-between align-items-center " >
      <div class=" multi-collapse collapse show" id="multiCollapseExample3">
          <button type="button" class="btn btn-outline-success me-3">Mark asread</button>
          <button type="button" class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="multiCollapseExample1 multiCollapseExample2 multiCollapseExample3" aria-expanded="true" >Reply</button>
      </div>
</div>

2.在區塊 2 的 按鈕 加上 data-bs-toggle="collapse" data-bs-target=".multi-collapse" ，這樣在點擊區塊 2 的reply按鈕之後 會隱藏 區塊 2，顯示區塊 1、3

   <button type="button" class="btn btn-success"  data-bs-toggle="collapse" data-bs-target=".multi-collapse" >Reply</button>

最後附上助教改好的 [code](https://codepen.io/wnptocip/pen/LYyJopL)

---

5. roger ：我想要在網頁卷軸滾動時達到左側的選單和右邊的內容不會互相覆蓋，想請問助教是因為我的container設定左右auto嗎，附上我的[pages]((https://james73007.github.io/week5/))

> 助教回覆：因為在 .nav 有設定 position:fixed;，造成元素脫離原本預設的版面配置。<nav> 脫離了之後 .container 往前遞補位置。如果不希望重疊的話可以在 .container 父層多包一層 div 設定 margin-left:296px;

---

6.Jiang V ：我想請問 admin 這頁，為什麼 conten / container 都沒撐開，table 變好小，需要怎樣調整程式碼呢 ??? 這是我的 repo 和 gh-pages 再請助教解惑，謝謝

> 助教回覆：主要是因為 .content 的父層設定 d-flex 造成的，.content 在成為內元件之後便不會佔滿整行，區塊的寬度會經由 flex-basis 來分配。在沒有設定 flex-basis 時預設值為 auto，這時 .content 的寬度就會是 .content 裡面的圖片、文字內容。
如果想要讓 table 的寬度能夠佔滿剩餘的空間，可以在 .content 加上 flex-grow:1;

.content{
 ...
 flex-grow:1;
 }

修改了之後會變這樣:

---

7.Jiang V:助教您好，延續 剛剛的問題，我剛在試，在 _layout.scss 19-27 行，把 content max-width: 984 px; 都改成 width: 984px;
好像就撐開了，這樣做也可以嗎 ?

> 助教回覆： 在 .content 設定寬度是可以的，只是會建議把 width 的單位改成 %

.content{
  width: 76.875%;
}

---

8.阿瓜:想問第11條～下了nav-lin,我想改裡面的變數,調整a的padding

原本：
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
想改成
$nav-link-padding-y: .25rem !default;
$nav-link-padding-x: .25rem !default;
但是失敗,該怎麼辦呢

https://codepen.io/hoick/pen/dyWqVGJ?editors=1100

> 助教回覆： 在自己的 scss 設定的變數 $nav-link-padding-x、$nav-link-padding-y 不會覆蓋掉 .nav-link 的 padding 值。依照 scss 檔案編譯順序 .nav-link 會套用 _variable.scss 內設定的 $nav-link-padding-x、$nav-link-padding-y ，想要調整可以有 3 種作法:

1.去 _variable.scss 修改 $nav-link-padding-x、$nav-link-padding-y 的值
2.在自己的 scss 用選擇器覆蓋

$nav-link-padding-y: .25rem !default;
$nav-link-padding-x: .25rem !default;

.nav-link{
$nav-link-padding-y: .25rem !default;
$nav-link-padding-x: .25rem !default;
}

3. 使用通用類別去覆蓋 .nav-link 的 padding

`<a class="nav-link p-1" href="#">`

---