Bootstrap侧边栏折叠后主内容无法占满宽度的技术求助

嘿，我完全懂你的困扰——固定了栅格宽度的侧边栏折叠后，主内容还死死卡着col-md-9的宽度，没法自动占满整个容器对吧？这是因为Bootstrap的栅格类是静态的，折叠侧边栏只是隐藏它，但不会自动调整相邻元素的栅格宽度。下面给你两种实用的解决方案：

方法1：用JavaScript监听折叠事件动态切换类 #

这个方法最直接，通过监听Bootstrap折叠组件的状态变化，给主内容区域切换对应的栅格类：

首先给你的主内容区域加个ID方便选择：

<div class="col-md-3 col-xs-1 p-l-0 p-r-0 collapse in" id="sidebar">...</div> 
<main id="main-content" class="col-md-9 col-xs-11 p-l-2 p-t-2">...</main>

然后添加JavaScript代码（用jQuery的话更简洁，Bootstrap默认依赖jQuery）：

// 监听侧边栏折叠完成事件
$('#sidebar').on('hidden.bs.collapse', function () {
  // 折叠后主内容占满宽度
  $('#main-content').removeClass('col-md-9 col-xs-11').addClass('col-md-12 col-xs-12');
});

// 监听侧边栏展开完成事件
$('#sidebar').on('shown.bs.collapse', function () {
  // 展开后恢复原来的栅格宽度
  $('#main-content').removeClass('col-md-12 col-xs-12').addClass('col-md-9 col-xs-11');
});

如果不想用jQuery，原生JS版本也可以：

document.addEventListener('DOMContentLoaded', function() {
  const sidebar = document.getElementById('sidebar');
  const mainContent = document.getElementById('main-content');

  sidebar.addEventListener('hidden.bs.collapse', function() {
    mainContent.classList.remove('col-md-9', 'col-xs-11');
    mainContent.classList.add('col-md-12', 'col-xs-12');
  });

  sidebar.addEventListener('shown.bs.collapse', function() {
    mainContent.classList.remove('col-md-12', 'col-xs-12');
    mainContent.classList.add('col-md-9', 'col-xs-11');
  });
});

方法2：纯CSS实现（无需JS） #

利用Bootstrap折叠组件的状态类，通过相邻兄弟选择器来覆盖主内容的栅格宽度：

/* 当侧边栏处于折叠状态（没有.in类）时，主内容占满宽度 */
#sidebar.collapse:not(.in) + main {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 移动端适配 */
@media (max-width: 767px) {
  #sidebar.collapse:not(.in) + main.col-xs-11 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

这里用!important是为了覆盖Bootstrap栅格类的优先级，如果你觉得!important不够优雅，可以给main加个自定义类（比如main-content），然后用更具体的选择器提升优先级，比如.container .main-content。

为什么原来的布局不行？ #

你用的col-md-3和col-md-9是Bootstrap预定义的静态栅格宽度，不管侧边栏是否隐藏，主内容都会保持9/12的宽度。折叠组件只是控制元素的显示/隐藏，不会自动调整栅格的宽度分配，所以必须通过动态修改类或者CSS覆盖来实现自适应。

内容的提问来源于stack exchange，提问作者G.L.P