如何在不使用 LESS 的情況下更改 Bootstrap Navbar Collapse 斷點？

如何在沒有LESS 的情況下調整Bootstrap 導航列折疊斷點

當瀏覽器寬度低於768px 時，Bootstrap 3 3 3 1欄預設折疊。可以使用 CSS 覆寫將此斷點調整為自訂值。以下是如何在不訴諸LESS 的情況下做到這一點：

Bootstrap 5（2023 更新）

• 對於永不折疊的導航欄，添加.navbar-expand class.
• 對於總是折疊的導航欄，不要使用.navbar-expand.

Bootstrap 4（2018 更新）

• 使用.navbar-expand-* 類別指定想要的斷點。

  • .navbar-expand-sm：折疊到576px 以下
  • .navbar-expand-md：折疊到768px 以下
  • .navbar-expand-lg：下面折疊992px
  • .navbar-expand-xl：折疊低於1200px
  • .navbar-expand：從不折疊
  • （無展開類）：總是折疊
• 對於自訂斷點，請使用CSS :

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

Bootstrap 3（2018 年之前）

• 使用以下CSS 覆蓋預設斷點：

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

• 替換「991px」 與您想要的斷點。

注意：

• 上述方法會覆寫所有頁面的預設行為。
• 您可以使用特定於裝置的媒體查詢來定位不同裝置上的不同斷點。
• 記住徹底測試您的更改，以確保它們不會破壞您網站的任何其他方面。

以上是如何在不使用 LESS 的情況下更改 Bootstrap Navbar Collapse 斷點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！