如何覆蓋 Bootstrap 導覽列折疊斷點？

覆蓋 Bootstrap 導覽列折疊斷點

某些場景需要修改 Bootstrap 導覽列的預設折疊斷點，設定為 768px。本指南研究了在不訴諸 LESS 的情況下改變此行為的替代方法。

Bootstrap 5（2023 更新）

Bootstrap 5 引入了簡化的方法。只需將 .navbar-expand 類別新增至導覽列即可獲得固定（永不折疊）的導覽列。對於永久折疊的導覽欄，請完全省略該類別。

Bootstrap 4（2018 更新）

Bootstrap 4 透過引入.navbar-expand- 增強了導覽列斷點控制* classes:

• .navbar-expand-sm：螢幕寬度小於576px的行動選單
• .navbar-expand-md：螢幕寬度小於768px 的行動選單
• .navbar-expand-lg：螢幕寬度小於的行動選單992px
• . navbar-expand-xl：螢幕寬度小於1200px的行動選單
• .navbar-expand：固定導覽欄，永不折疊
• （無展開類）：總是顯示行動選單

或者，您可以定義自訂斷點：

@media (min-width: 1300px) {
  .navbar-expand-custom {
    flex-direction: row;
    ...
  }
}

Bootstrap 3

對於 Bootstrap 3.3.x，您可以使用以下 CSS 覆寫斷點：

@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  ...
}

以上是如何覆蓋 Bootstrap 導覽列折疊斷點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！