如何在不使用 LESS 的情况下更改 Bootstrap Navbar Collapse 断点？

如何在没有 LESS 的情况下调整 Bootstrap 导航栏折叠断点

当浏览器宽度低于 768px 时，Bootstrap 3 导航栏默认折叠。可以使用 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中文网其他相关文章！