Bootstrap 5.3.0仪表盘模板在768px-991px宽度下侧边栏隐藏，如何修复？

官方仪表盘模板在768px（md断点）到991px（lg断点前）区间内，默认将侧边栏设置为折叠隐藏状态，仅能通过点击顶部触发按钮临时展开。要让该宽度区间内侧边栏默认正常显示，可通过以下两种方法修复：

方案一：修改CSS媒体查询（快速生效） #

在项目自定义CSS文件（或直接修改模板样式）中添加以下代码，覆盖默认响应式逻辑：

/* 强制md到lg区间侧边栏保持展开状态 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar {
    transform: translateX(0) !important;
    width: 220px !important; /* 也可替换为模板内置的--bs-sidebar-width变量 */
  }
  /* 调整主内容区左侧边距，避免被侧边栏遮挡 */
  .content-wrapper {
    margin-left: 220px !important;
  }
  /* 可选：隐藏该区间内的侧边栏折叠按钮，避免冗余交互 */
  .navbar-toggler[aria-controls="sidebar"] {
    display: none !important;
  }
}

方案二：调整JS交互逻辑（保留折叠功能） #

如果需要在该区间内仍支持按钮折叠/展开侧边栏，仅修改默认显示状态，可调整模板的dashboard.js文件：

1. 找到监听窗口宽度变化的代码块，通常类似：

function checkSidebarState() {
  if (window.innerWidth >= 992) {
    document.body.classList.add('sidebar-expanded');
  } else {
    document.body.classList.remove('sidebar-expanded');
  }
}

2. 将判断条件的992改为768，修改后：

function checkSidebarState() {
  if (window.innerWidth >= 768) {
    document.body.classList.add('sidebar-expanded');
  } else {
    document.body.classList.remove('sidebar-expanded');
  }
}

3. 补充CSS确保md区间内样式适配：

@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar-expanded .sidebar {
    transform: translateX(0);
    width: var(--bs-sidebar-width);
  }
  .sidebar-expanded .content-wrapper {
    margin-left: var(--bs-sidebar-width);
  }
}

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