[Web] 使用 breakpoint 控制 Bootstrap Navbar 的 Collapse




我們常常需要使用 Bootstrap 來做 Navbar,當 browser 被縮小時,Navbar 會 Collapse 成一個有三條線的按鈕。

如下所示:
當寬度夠時,畫面如下:
bootstrap_01

當寬度縮小時,應該要變成下面這樣:
bootstrap_03

但是,有時候畫面介於大跟小中間時,會出現兩個 Navbar 重疊的狀況,如下:
bootstrap_02

這個要怎麼解決呢?

答案是,使用 MediaQuery 設定好正確的 breakpoint!

請參考 這裡 的做法!

參考資料:




Be the first to comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.