如何覆盖 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中文网其他相关文章！