折叠面板在小屏下自动展开，其实是CSS强制覆盖了display，最常见现象是：视口缩到移动端断点时，自定义CSS对#navbarSupportedContent等ID直接设display: block，覆盖Bootstrap的JS动态控制逻辑，导致菜单始终可见且点击失效。
折叠面板在小屏下自动展开，其实是CSS强制覆盖了display
最常见现象是：视口缩到 .collapse 元素未经点击就显示出来，或点击后无法收起。这不是 JS 失效，而是你写的 CSS 把 display: none 覆盖成了 block 或 flex。
用开发者工具选中该元素，在「Computed」面板看最终生效的 display 值；如果不是 none，说明响应式规则没赢过其他样式。
- 检查是否有全局重置如
.collapse { display: block !important; }—— 这类声明会直接废掉 Bootstrap 的折叠逻辑 - 搜索项目中是否用了更具体的选择器，例如
.sidebar .collapse，它的权重高于默认的.collapse - 确认你引入的是完整版
bootstrap.min.css，某些 CDN 精简包会剔除@media内的折叠规则
想让折叠面板在特定宽度“彻底不折叠”，得禁用JS行为+覆盖CSS
单纯靠 CSS 无法让 data-bs-toggle="collapse" 按钮失效，因为 Bootstrap JS 会在匹配断点时主动添加/移除 .show 类。要让它“不折叠”，必须切断 JS 控制链并锁定状态。
- 给目标元素（如
#myCollapse）加class="collapse show"，再用媒体查询强制保持display: block：
@media (max-width: 991.98px) {
#myCollapse {
display: block !important;
}
}
- 同时移除或禁用触发按钮的
data-bs-toggle属性，否则 JS 仍会尝试切换类名 - 若需保留按钮但禁用折叠逻辑，可加
onclick="return false;"或用 JS 移除事件监听器
用 data-bs-breakpoint 控制折叠触发时机（仅限 navbar-collapse）
data-bs-breakpoint 是 Bootstrap 5.3+ 新增属性，但它**只对 .navbar-collapse 有效**，不适用于通用 .collapse 面板。别在手风琴或普通折叠区滥用它。
- 正确用法：
- 它不会让面板“失效”，只是把折叠阈值从默认
lg（≥992px）提前到sm（≥576px） - 如果目标是“在 1200px 以上完全不折叠”，那这个属性帮不上忙——它只管“何时开始折叠”，不管“何时禁止折叠”
真正可靠的“失效”方案：媒体查询 + 强制类名 + 移除交互
所谓“失效”，本质是让折叠行为在某段视口范围内不可见、不可触、不可控。这需要三步协同：
- 在目标断点内，用
@media强制设置.collapse为display: block，并清除height和overflow相关过渡 - 给折叠容器加固定类名（如
collapse-force-open），避免依赖 JS 动态类 - 在相同断点内隐藏或禁用
.navbar-toggler或自定义触发按钮：display: none或pointer-events: none
注意：不要用 !important 覆盖所有断点，只作用于你要禁用的区间；否则大屏下也会失去折叠能力。
复杂点在于，Bootstrap 的 collapse 逻辑和媒体查询不是解耦的——你改了 CSS 显示，JS 还可能偷偷操作类名。所以“失效”从来不是单点控制，而是 CSS 锁定视觉 + JS 切断行为 + DOM 移除交互的组合动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
