使用Bootstrap&；jQuery，当侧栏被激活时，如何使容器类变小？

我以更好的形式重新发布了这个问题，并在我的示例中包含了更多的代码。我想删除这个，但它说不要删除

这里有一个链接到我转发的问题。。。

---

当侧边栏可见时，为什么不创建一个新类来设置容器的新宽度呢

比如说

你有

.container{
   width: 960px;
}

侧边栏激活后，只需将其替换为 .... 例如，如果边栏宽度为160px

.new container {
   width: 800px;
   transform: translateX(160px); /*the magic*/     
}

并使用

transform:translateX（160px）；将主体160px移动到屏幕的右侧或左侧，使条形图不会覆盖您的内容。

---

您已经在使用js。所以这样做应该没有问题。

您需要使用javascript/jquery动态调整容器宽度。您可以使用简化的容器规则定义css类，并使用侧栏扩展事件上的jquery将该类附加到容器元素的类名

大概是这样的：

css:

脚本：

function expandSideBar(){

$('.container').addClass('container-resize');//reduce size of container 

}

注意：您可能还需要减小容器内某些元素的宽度

function expandSideBar(){

$('.container').addClass('container-resize');//reduce size of container 

}