Navbar 折叠断点由 Bootstrap 的 $grid-breakpoints 变量决定，修改需重定义该 Sass 变量并重新编译；纯 CSS 方案可用媒体查询强制控制 .navbar-collapse 显示状态；navbar-expand 无后缀类实现始终展开，但不支持自定义像素断点。
Navbar 默认断点是 576px，但实际生效的是 navbar-expand- 类对应的断点
bootstrap 5 的 navbar 折叠行为不靠媒体查询像素值硬编码，而是绑定在响应式断点类上。比如 navbar-expand-md 表示“在 md 及更大断点展开”，而 md 默认对应 768px（最小宽度），不是折叠临界点本身。真正决定何时收起的，是该断点的 min-width 值 —— 小于它时 navbar 折叠，等于或大于时展开。
所以改断点，本质是改断点定义，不是改某一行 CSS。
修改断点需覆盖 Bootstrap 的 $grid-breakpoints Sass 变量
直接改 CSS 无效，因为 navbar 的折叠逻辑由预编译的类（如 .navbar-expand-md）驱动，这些类依赖全局断点配置。必须在引入 Bootstrap 源码前重定义变量：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); <p>// 比如把 md 断点从 768px 改成 900px： $grid-breakpoints: ( xs: 0, sm: 576px, md: 900px, // ← 关键改动 lg: 1100px, xl: 1300px, xxl: 1500px );</p><p>@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ...其余 import
- 必须在
@import "bootstrap/scss/functions"之前覆盖$grid-breakpoints - 所有断点名（
xs,sm等）必须保留，否则navbar-expand-sm这类类名会失效 - 改完后重新编译 CSS，
navbar-expand-md就会在 ≥900px 时展开
不想用 Sass？用 CSS 媒体查询强行覆盖折叠逻辑
如果只能用 CDN 或纯 CSS 环境，可以绕过类名，用媒体查询直接控制 .navbar-collapse 的显示状态：
@media (min-width: 850px) {
.navbar-collapse {
display: flex !important;
}
.navbar-toggler {
display: none;
}
}
<p>@media (max-width: 849.98px) {
.navbar-collapse {
display: none !important;
}
.navbar-toggler {
display: flex;
}
}- 注意
!important是必须的，否则被 Bootstrap 内联style="display: block"覆盖 - 断点值（如
850px）要避开 Bootstrap 原有断点，避免冲突；建议用非整数（如849.98px）防止四舍五入导致边界模糊 - 这个方式不生成新类名，所以 HTML 中仍用
navbar-expand-lg之类也无妨，但语义已失效
用 navbar-expand 无后缀类可实现“始终展开”，但别滥用
navbar-expand（无破折号和断点名）是 Bootstrap 提供的“永远不折叠”方案，它移除了所有媒体查询，让 navbar 始终水平展开：
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<div class="navbar-collapse"> <!-- 注意：这里没加 collapse -->
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
</ul>
</div>
</div>
</nav>- 必须去掉
collapse类和navbar-toggler，否则结构错乱 - 移动端会强制横向滚动，内容溢出不可控，仅适合后台管理等固定宽屏场景
- 它不解决“自定义像素”的需求，只是绕过断点 —— 如果真要适配 823px 这种奇数断点，还是得走 Sass 或媒体查询
断点这事，表面调个像素，背后连着整个响应式系统。改 Sass 变量最干净，但要求构建流程支持；CSS 覆盖见效快，但容易和未来升级冲突；而无后缀 expand 是个开关，不是调节器。选哪个，取决于你手里的构建权限和页面的实际伸缩容忍度。
