Bootstrap 5仅移动端启用折叠功能失效问题排查

你的问题主要源于两点：一是自定义CSS优先级不足，被Bootstrap默认样式覆盖；二是Bootstrap的折叠组件JS逻辑仍会在桌面端生效，导致点击按钮或页面初始化时内容被折叠。

1. 提升CSS优先级，强制桌面端显示内容 #

修改媒体查询中的选择器，通过绑定目标元素ID来提高优先级，确保样式能覆盖Bootstrap默认设置：

@media screen and (min-width: 768px){
  #collapseExample.collapse {
      display: block !important;
      height: auto !important;
      visibility: visible;
  }
  #collapseExample.collapsing{
      position: relative;
      height: unset !important;
      overflow: hidden;
  }
}

2. 禁用桌面端折叠按钮的交互逻辑 #

即使CSS强制显示内容，点击按钮仍会触发Bootstrap的JS折叠逻辑，所以需要在桌面端让按钮失去功能：

方法一：CSS禁用点击事件

@media screen and (min-width: 768px){
  [data-bs-toggle="collapse"][href="#collapseExample"] {
      pointer-events: none;
      cursor: default;
      opacity: 0.6; /* 可选，视觉提示按钮不可用 */
  }
}

方法二：JavaScript动态控制（更稳定）

通过监听窗口尺寸变化，动态启用/禁用折叠功能：

function adjustCollapseState() {
  const collapseBtn = document.querySelector('[data-bs-toggle="collapse"][href="#collapseExample"]');
  const collapseEl = document.getElementById('collapseExample');
  const collapseInstance = new bootstrap.Collapse(collapseEl, { toggle: false });

  if (window.innerWidth >= 768) {
    // 桌面端：展开内容，移除按钮折叠属性
    collapseInstance.show();
    collapseBtn.removeAttribute('data-bs-toggle');
    collapseBtn.setAttribute('aria-expanded', 'true');
  } else {
    // 移动端：恢复折叠功能，保持折叠状态
    collapseBtn.setAttribute('data-bs-toggle', 'collapse');
    collapseBtn.setAttribute('aria-expanded', 'false');
    collapseInstance.hide();
  }
}

// 页面加载时初始化
adjustCollapseState();
// 窗口大小变化时重新调整
window.addEventListener('resize', adjustCollapseState);

3. 加载顺序注意事项 #

确保你的自定义CSS和JS代码在Bootstrap的CSS和JS之后加载，这样才能正确覆盖Bootstrap的默认行为。

内容的提问来源于stack exchange，提问作者James Parry