# 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做斷點修改顏色就可以了