導航條是在您的應用程式或網站中作為導航頁頭的響應式基礎元件。它們在行動裝置上可以折疊(並且可開可關),且在視口(viewport)寬度增加時逐漸變為水平展開模式。
兩端對齊的導航條導航連結已經被棄用了。
導航條內所包含元素溢位
由於 Bootstrap 並不知道你在導航條內放置的元素需要佔據多寬的空間,你可能會遇到導航條中的內容折行的情況(也就是導航條佔據兩行)。解決方法如下:
- 減少導航條內所有元素所佔據的寬度。
- 在某些尺寸的螢幕上(利用 響應式工具類別)隱藏導航條內的一些元素。
- 修改導航條在水平排列和折疊排列互相轉換時,觸發這個轉換的最小螢幕寬度值。可以透過修改
@grid-float-breakpoint
變數來實現,或是自己重寫相關的媒體查詢程式碼,覆寫 Bootstrap 的預設值。
依賴 JavaScript
如果 JavaScript 被禁用,並且視口(viewport)足夠窄,致使導航條折疊起來,導航條將不能被打開,.navbar-collapse
內所包含的內容也將不可見。
修改視口的閾值,進而影響導航條的排列模式
當瀏覽器視窗(viewport)的寬度小於 @grid-float-breakpoint
值時,導航條內部的元素變為折疊排列,也就是變現為行動裝置展現模式;瀏覽器視窗(viewport)的寬度大於@grid-float-breakpoint
值時,導航條內部的元素變成水平排列,也就是變現為非行動裝置展現模式。透過調整原始碼中的這個值,就可以控制導航條何時堆疊排列,何時水平排列。預設值是 768px
(小螢幕 -- 或說是平板 --的最小值,或是平板)。