使用Bootstrap& jQuery，如何获取容器类更改为较小的大小只有当侧边栏BOTH激活和重叠？

本文介绍了使用Bootstrap& jQuery，如何获取容器类更改为较小的大小只有当侧边栏BOTH激活和重叠？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有一个带有隐藏边栏的布局，通过使用jQuery中的.toggleClass切换开/关侧边栏。当在（可见）上切换类时，侧边栏从右侧显示，.css规则填充右侧：250px;应用于具有Bootstrap 容器类的#wrapper。 I have a layout with a hidden sidebar that appears on the right hand side by using .toggleClass from jQuery to toggle on/off the sidebar. When the class is toggled on(visible), the sidebar appears from the right and the .css rule padding-right:250px; is applied to the #wrapper that has a Bootstrap container class. 类内置于Bootstrap.css中，使页面响应，以便根据浏览器窗口宽度。它当前设置的方式是当侧边栏打开，它可能或可能不重叠的容器，这取决于浏览器窗口在目前的宽度...我可以设置一个CSS规则来调整容器的大小，并切换该类 on / off ，但那不认为有时不需要添加。 The container class is built-in to the Bootstrap.css that makes the page responsive, so that it resizes based on the browser window width. The way it's currently set, is when the sidebar opens, it may or may not overlap the container, depending on how wide the browser window is at the moment... I can setup a css rule to resize the container and toggle that class on/off, but then that doesn't consider that sometimes it does not need to be added. Only when there is an overlap because the window isn't wide enough does it need to be added.#wrapper.toggled { padding-right: 250px;}#wrapper.toggled #sidebar-wrapper { width: 250px; z-index: 50;} 脚本： script:$("#menu-icon-trigger").click(function(e) {e.preventDefault(); $(".container").toggleClass("container-resize");});$("#menu-icon-trigger").click(function(e) {e.preventDefault(); $("#wrapper").toggleClass("toggled");});当浏览器窗口宽到足以使边栏可见，而不重叠容器时，容器不需要进一步降低。我想做的是，使它在容器将减少宽度当它被覆盖的侧边栏，而不只是因为边栏是可见的。 When the browser window is wide enough that the sidebar can be visible without overlapping the container, the container does not need to be reduced further. What I want to do, is make it where the container will reduce width only when it is being covered up by the sidebar, and not just because the sidebar is visible. 如果只是将侧边栏的宽度（在上切换时）减去整个窗口，在执行媒体查询以了解容器类是否应该进一步减少时使用的宽度...但是如何设置此规则/查询？Seems to me that it would work fine if it just subtracted the width of the sidebar (when it is toggled on) to the overall window width that it uses when it performs a media query to know whether the container class should reduce further... but how do I setup this rule/query?推荐答案对于您要求的最佳答案 - 如何在计算边栏后动态计算变量容器的大小 - 将使用 CSS calc ，如下所示：The best answer to what you are asking - how to dynamically calculate the size of a variable container after accounting for the sidebar - would be to use CSS calc, like this:// Container is 100% of the viewport minus 250px (width of sidebar)width: calc(100% - 250px);这样，你可以以任何分辨率，我又走了一步，试图完成一个界面（ Codemen上的DEMO ），基于 startbootstrap.com示例）。 That gives you a full width container at any resolution, minus the sidebar. I went a step further and tried to finish out an interface (DEMO on Codepen, based on a startbootstrap.com example). 高于平板电脑尺寸（768像素）：Above tablet sizes (768px): 能够 主容器响应扩展边栏（使用calc） 转换顺畅 低于平板电脑尺寸768像素：Below tablet sizes 768px: 右侧边栏固定打开，但可以切换到 主容器始终完全保持100％的宽度 主容器始终与侧边栏重叠 转换是平滑的 the right sidebar is fixed open but can get toggled awaythe main container remains fully 100% width at all timesmain container is overlapped by sidebar at all timestransitions are smooth此代码的关键部分是＃page-content- code>在＃wrapper-toggled 类通过JS动态应用时适用于 calc > Key part to this code is how the #page-content-wrapper works with calc when the #wrapper-toggled class is dynamically applied via JS.#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%; }} 这篇关于使用Bootstrap& jQuery，如何获取容器类更改为较小的大小只有当侧边栏BOTH激活和重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！