Twitter bootstrap 3 侧边栏折叠引导后强制内容以适应全宽

我在我的页面中使用了这个，但是这里的边栏和内容对于两个div都有固定的宽度，主内容在折叠后并没有完全变宽

HTML:

。。。
...

但是我想要的是在侧边栏崩溃后，主要内容应该是全宽的

---

我检查了stack overflow中的问题和其他一些问题，但没有找到我想要的

以下是需要做的事情：

首先，我用

col

替换了过时的

col xs

。然后我将剩余的

col-md-9 col-11

替换为

col

。完成了

它工作的原因是侧边栏的第一列已经定义

col

然后只填充所有可用的剩余空间

以下是工作代码：

#侧栏。列出组项{
边界半径：0；
背景色：#333；
颜色：#ccc；
左边框：0；
右边界：0；
边框颜色：#2c2c；
空白：nowrap；
}
/*突出显示活动菜单*/
#侧栏。列表组项：未（.collapsed）{
背景色：#222；
}
/*封闭状态*/
#sidebar.list group.list组项[aria expanded=“false”]：：之后{
内容：“\f0d7”；
字体系列：Fontsome；
显示：内联；
文本对齐：右对齐；
左侧填充：5px；
}
/*开放状态*/
#侧栏.列表组.列表组项[aria expanded=“true”]{
背景色：#222；
}
#sidebar.list group.list group项[aria expanded=“true”]：：之后{
内容：“\f0da”；
字体系列：Fontsome；
显示：内联；
文本对齐：右对齐；
左侧填充：5px；
}
/*一级*/
#侧栏.列表组.折叠.列表组项{
左侧填充：20px；
}
/*二级*/
#侧边栏.list group.collapse>.collapse.list group项{
左侧填充：30px；
}
/*三级*/
#侧栏.列表组.collapse>.collapse>.collapse.list组项目{
左侧填充：40px；
}
@介质（最大宽度：48em）{
/*在小屏幕上覆盖子级别*/
#侧边栏.列表组.collapse.in，#侧边栏.列表组.collapsing{
位置：绝对位置；
z指数：1；
宽度：190px；
}
#侧边栏.列表组>.列表组项目{
文本对齐：居中；
填充物：75雷姆。5雷姆；
}
/*折叠时隐藏顶级插入符号图标*/
#侧边栏.list group>.list group项[aria expanded=“true”]：：之后，
#侧边栏.list group>.list组项[aria expanded=“false”]：：之后{
显示：无；
}
}
/*切换整个侧栏时，将过渡动画更改为“宽度”*/
#侧边栏{
-webkit过渡计时功能：轻松；
-o-转换-定时-功能：轻松；
过渡时间功能：轻松；
-webkit转换持续时间：.2s；
-o-过渡持续时间：.2s；
过渡持续时间：.2s；
}
#边栏。正在崩溃{
不透明度：0.8；
宽度：0；
-webkit过渡计时功能：易用；
-o-转换-定时-功能：易用；
过渡时间功能：轻松进入；
-webkit转换属性：宽度；
-o-过渡性质：宽度；
过渡特性：宽度；
}
主要{
背景颜色：绿色；
}

引导4侧边栏菜单
一种反应灵敏的多层次垂直手风琴

侧边栏在那里折叠时，主内容确实会全宽显示。另外，您没有使用Bootstrap4代码。Bootstrap3和Bootstrap4完全不兼容。所以，你必须决定（在你的标签中）这是关于哪个版本的。我这里不使用Bootstrap4，但我正在尝试迁移到我的pageAha中的Bootstrap4。我懂了。但这在你的问题中应该是非常清楚的。只参考这个更新的示例Oops，忘记用有效的引导4代码替换填充。现在检查我更新的代码段。（所有

p-l

和

p-r

和

p-t

类的实例都必须分别替换为

pl

、

pr

和

pt

。实际上，

pt-2

在这种特殊情况下不会起任何作用。因此，如果您想在顶部添加一点填充，则需要将

pt-2

类添加到行中。）而不是将其添加到列中。（

pt-2

表示“填充前2个单元”）

<div class="col-md-3 col-xs-1 p-l-0 p-r-0 collapse in" id="sidebar">...</div>

<main class="col-md-9 col-xs-11 p-l-2 p-t-2">...</main>