删掉 navbar-expand-* 类是最直接的办法，bootstrap 5 默认不折叠导航栏且不渲染 .navbar-toggler 按钮；若必须保留该类，则需用 !important 强制隐藏按钮并放开 .navbar-collapse。
删掉 navbar-expand-* 类是最直接的办法
Bootstrap 5 默认不折叠导航栏，也不渲染 .navbar-toggler 按钮——前提是你没加任何 navbar-expand-* 类。一旦写了 navbar-expand-md 或 navbar-expand（无后缀），按钮就会在对应断点下出现并可点击。
所以“隐藏折叠按钮”，本质不是加 CSS，而是删类名：
-
navbar-expand（无后缀）等价于navbar-expand-lg，小屏必出按钮，必须删 - 保留
navbar+navbar-light等基础类即可，按钮 DOM 根本不会生成 - 如果 HTML 里还留着
<button class="navbar-toggler"></button>，它会变成不可点击的静态元素，建议一并删掉
如果必须保留 navbar-expand-* 类，用 CSS 强制隐藏
极少数场景（如 CMS 模板锁定类名、构建流程自动注入），你无法删类，只能覆盖。此时不能只设 display: none，因为按钮可能被 JS 绑定事件，残留 DOM 容易引发误判。
推荐写法：
@media (max-width: 767.98px) {
.navbar-toggler {
display: none !important;
}
.navbar-collapse {
display: block !important;
}
}
- 必须加
!important，否则 Bootstrap 的响应式 CSS 规则优先级更高 - 同时放开
.navbar-collapse，否则即使按钮没了，菜单仍处于折叠状态 - 注意检查是否有其他
!important冲突（比如自定义主题或插件）
为什么 visibility: hidden 或 opacity: 0 不行
这两个属性只是让按钮“看不见”，但仍在文档流中占位，且仍可被聚焦、被屏幕阅读器读取，更关键的是：它们不会阻止 Bootstrap JS 初始化该按钮。
- JS 仍会为
.navbar-toggler绑定 click 事件，但用户点不到——造成“按钮存在却无效”的调试困惑 - 若页面有
aria-expanded同步逻辑，残留按钮可能干扰状态判断 - 移动端点击穿透风险：透明按钮盖在内容上，导致背后链接点不中
容易被忽略的 DOM 干扰项
你以为按钮藏好了，但实际问题出在结构残留上：
- HTML 中还留着
<div class="navbar-collapse collapse">，即使没 JS 初始化，它也占 DOM 节点，可能被误选中 <li>用了 Webpack/Vite 的 HTML 压缩插件，悄悄删掉了 <code>collapse类名，导致 JS 找不到目标，但按钮还在 - 自定义 Sass 变量改了
$grid-breakpoints，但没重新编译 CSS，断点行为错乱，按钮在不该出现的时候出现了
真要彻底禁用，结构得精简：去掉 .navbar-collapse 容器，把 .nav 直接放在 .navbar 下——按钮没了，折叠逻辑也没了，干净利落。
