如何更改 Bootstrap 導覽列折疊斷點？

如何使用手寫筆自訂Bootstrap 導覽列折疊斷點

Bootstrap 導覽列的一個常見自訂請求是更改導覽列折疊的斷點。雖然 Bootstrap 3 需要編輯 LESS 變量，但這可以在 Stylus 中使用一些額外的 CSS 來實現。

Bootstrap 5

從 Bootstrap 5 開始，管理導覽列折疊斷點變得更簡單了。預設情況下，導覽列將折疊到 992 像素以下。您可以透過新增.navbar-expand-* 類別來自訂它，其中* 代表您要使用的斷點：

• .navbar-expand-sm：576px 以下的行動選單
• .navbar-expand-md：下面的行動選單768px
• .navbar-expand-lg：992px以下的行動選單
• .navbar-expand-xl：1200px以下的行動選單
• .navbar-expand：導覽列總是展開
• （無擴充類）：導覽列總是Collapsed

Bootstrap 4

在Bootstrap 4 中，您可以使用與Bstrapp 5相同的.navbar-expand-* 類。此外，您可以建立使用自訂斷點CSS:

@media (min-width: 1300px) {
  .navbar-expand-custom {
    // Custom CSS rules for navbar expansion
  }
}

Bootstrap 3

對於Bootstrap 3，這是工作CSS：

@media (max-width: 991px) {
  // CSS rules to override the default collapse breakpoint
}

對於Bootstrap 3，這是工作CSS：

將991px 替換為您想要的斷點。這會將導覽列折疊到指定像素寬度以下。

768px 以下斷點注意

如果需要設定 768px 以下斷點，請對上面的 CSS 稍作調整是必要的。請參閱提供的連結以取得詳細說明。

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