怕分享的內容會不正確，我會於助教批改作業後確定過關後，才分享解題過程及心得喔～

前言

因為自己工作有要用到，所以看了 Amos 大大的幾個 Youtube 影片好對 BootStrap 這個套件有點了解， Amos 老師的講解真的很清楚，加上公司同事操作一遍如何加上 CSS 把套件變成自己想要的樣子，我就大概能上手，也自己組出幾個頁面玩了一下，感覺自己對 BootStrap 的特性算是清楚。

看到這關的題目的時候還在心裡想說，嗯嗯嗯　很簡單啊！感覺都會解！

解題前 OS

X 軸是什麼還不知道，先放著。

BootStrap 卡片想要等高的話，就是把卡片們的高度設定統一就行了！

行動版要呈現單欄這根本小 case ，我自己練習的時候做過好幾遍！

正式解題

google 了一下，原來 X 軸就是頁面拉窄之後顯示的橫向卷軸，如果跑出這個卷軸的話，代表網頁不是響應式的，我記得會顯示這個卷軸的原因應該是 < meta > 標籤沒有設定好，檢查一下原始檔，這裡的標籤有設定好，那一定是有某個元素的寬度被寫死了，用 dev tool 看一下哪個元素的寬度太寬，修改一下就行！

卡片的部分都給他們 w-100 的 class 簡單解決！

行動版就是外層要有 row ，裡面再給 col 值就好，加上去之後的版面有點奇怪，好像圖片跟文字的順序有點不同，加上 order 讓順序正常。

簡單交作業 ٩(๑•̀ω•́๑)۶

助教批改

什麼！我這麼自信滿滿能答對的題目，助教審核居然又不通過？！ ٩(ŏ﹏ŏ、)۶

嗯 又是我自己想得太簡單了

原來 BootStrap 專案裡出現 X 軸的原因是因為外層沒有 .container 容器包住，因此只要給它一個容器的 class 就可以了。

而為了要讓我的兩欄式排版看起來正常，我加了 .d-flex ，但其實在 BootStrap 裡的 .row 裡面就已經有包含這個屬性了，所以再加上等於是多餘的。

過關感想

經過連續兩關的挫敗，感覺密室逃脫真的不簡單，原本以為自己會的東西結果觀念上居然有這麼多落差，果然修行還是不夠啊．．．