使用Bootstrap & jQuery，如何使容器类只在侧边栏被激活和重叠时更改为更小的大小？

Question

我有一个隐藏的侧边栏的布局，它显示在右边，通过使用.toggleClass from jQuery来切换/关闭侧栏。当类切换(可见)时，侧边栏从右侧出现，.css规则填充- right :250PX；将应用于具有Bootstrap容器类的#包装器。

容器类内置到使页面响应的Bootstrap.css中，因此它根据浏览器窗口宽度调整大小。当前设置它的方式是，当侧边栏打开时，它可能重叠，也可能不重叠容器，这取决于当前浏览器窗口的宽度.我可以设置一个css规则来调整容器的大小，并打开/关闭那个类，但是这并不考虑有时不需要添加它。只有当由于窗口不够宽而出现重叠时，才需要添加。

css：

#wrapper.toggled {
    padding-right: 250px;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
    z-index: 50;
}

剧本：

$("#menu-icon-trigger").click(function(e) {e.preventDefault(); $(".container").toggleClass("container-resize");});
$("#menu-icon-trigger").click(function(e) {e.preventDefault(); $("#wrapper").toggleClass("toggled");});

当浏览器窗口足够宽，可以在不重叠容器的情况下看到侧栏，则不需要进一步减少容器。我想要做的是，只有当容器被侧边栏覆盖时，容器才会缩小宽度，而不仅仅是因为侧边栏是可见的。

在我看来，如果它将侧边栏的宽度减去(切换时)到它在执行媒体查询时使用的整体窗口宽度，以确定容器类是否应该进一步减少，它就会工作得很好……但是如何设置这个规则/查询呢？

Answer 1

您要问的最好的答案是使用CSS calc，如下所示:如何在计算边栏之后动态计算变量容器的大小：

// Container is 100% of the viewport minus 250px (width of sidebar)
width: calc(100% - 250px);

这为您提供了一个任意分辨率的全宽度容器，减去侧栏。我更进一步，试图完成一个接口(Codepen演示，基于startbootstrap.com实例)。

以上片剂尺寸(768)：

• 右边的边栏是可切换的。
• 主容器响应扩展侧栏(使用calc)。
• 过渡是平滑的

以下平板尺寸为768：

• 右边的侧边栏是固定的，打开的，但可以切换开。
• 主容器始终保持100%的宽度。
• 主容器在任何时候都被侧栏重叠。
• 过渡是平滑的

这段代码的关键部分是当通过JS动态应用#page-content-wrapper类时，#wrapper-toggled是如何与calc一起工作的。

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;

  @media (min-width: 768px) {
    padding: 20px;
    position: relative;
    width: calc(100% - 250px);
  }
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  width: 100%; 

  @media (min-width: 768px) {
    position: relative;
    margin-right: 0;
    width: 100%;
  }
}