如何自訂 Bootstrap 導覽列折疊斷點？

自訂 Bootstrap 導覽列折疊斷點

使用 Bootstrap 時，導覽列折疊的預設斷點設定為 768px。雖然這可能適合大多數情況，但在某些情況下您可能希望更改此斷點以更好地滿足您的特定要求。本文將指導您透過各種方法來實現此目的，而無需求助於 LESS。

Bootstrap 5 及以上

在 Bootstrap 版本 5 及更高版本中，折疊導覽列已處理通過「navbar-expand-*」類。以下是細分：

• .navbar-expand：無折疊
• .navbar-expand-sm：在小於576px 的螢幕上折疊
• .navbar- expand- md：在小於以下的螢幕上折疊768px
• .navbar-expand-lg：在小於992px
• .navbar-expand-xl：在小於1200px 的螢幕上折疊

引導程式4

類似地，在Bootstrap 4 中，您可以使用navbar-expand-* 類別：

• .navbar-expand-sm：在小於576px的螢幕上折疊
• .navbar-expand-md：在小於以下的螢幕上折疊768px
• .navbar-expand-lg：在小於992px
• .navbar-expand-xl：在小於1200px的螢幕上折疊

但是，如果您需要自訂斷點，可以使用以下命令CSS:

@media (min-width: 1300px) {
  .navbar-expand-custom {
    /* Customize navbar behavior at your specific breakpoint */
  }
}

Bootstrap 3 (3.3.x)

對於Bootstrap 3.3.x，您可以使用自訂CSS覆蓋導覽列斷點：

@media (max-width: 991px) {
  /* Override navbar collapsing point at 991px */
  /* Adjust collapse point as needed */
}

注意：此處提供的自訂 CSS適合設定大於768px的斷點。對於小於 768px 的斷點，請參閱問題中提供的範例。

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