---
# System prepended metadata

title: T3：把header兩種模式合併
tags: [好想工作室]

---

# T3：把header兩種模式合併
###### tags: `好想工作室`
2022.08.02（Tue.）

### 目的

以下是原先的作法，把header分成了兩個部份header__wrap及mobile__wrap，再依靠media query來做斷點，當尺寸高於medium（768px）時，mobile__wrap就會加上display: none;讓他消失，反之當尺寸低於768px時，則header__wrap消失：
![](https://i.imgur.com/9NyhTkK.png)
![](https://i.imgur.com/EujT2K8.png)

不過在T3-v1看版後，佳萱告知可以單純用BS做出來，所以這裡要嘗試做出一個不分header__wrap及mobile__wrap的header。

### 解決過程

![](https://i.imgur.com/BDTBtbs.png)
![](https://i.imgur.com/kC7D3sr.png)

原先把mobile__wrap裡頭的nav挪用出來，但排列上一直失敗（會並排）
後來才發現我把.container跟.row這兩個class放到了同一層中

應該要：.container > .row > .col這樣一層一層的放下來才對

基本上架構對了之後，後面只要利用media query做斷點修改顏色就可以了