twitter-bootstrap Bootstrap offcanvas 侧边栏切换任何画布尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22997510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap offcanvas sidebar toggling for any canvas size
提问by ducu
Could you please explain how offcanvas sidebar toggling works?
你能解释一下offcanvas侧边栏切换是如何工作的吗？
I can't make the actual sidebar disappear for sm. I can make the button visible (visible-sm), but toggling doesn't work - the sidebar is always visible.
我无法让 sm 的实际侧边栏消失。我可以使按钮可见（visible-sm），但切换不起作用 - 侧边栏始终可见。
Toggling works for xs size, that's fine, but I want to make it work for sm the same way, or any other size for that matter.
切换适用于 xs 尺寸，这很好，但我想让它以相同的方式适用于 sm，或任何其他尺寸。
Partial answer: Changing max-widthin offcanvas.css makes toggling work for bigger sizes as well, sm in this case:
部分答案：max-width在 offcanvas.css 中进行更改也可以为更大的尺寸切换工作，在这种情况下是 sm：
@media screen and (max-width: 991px) {
/* 991px instead of 767px makes toggling work for sm as well */
.row-offcanvas {
/* ... */
}
/* and so on */
}
Butthere's still a problem - when canvas width is between 780 and 991px, the sidebar is visible even if it's toggled off. Any idea how to fix this?
但是仍然存在一个问题——当画布宽度在 780 到 991 像素之间时，侧边栏即使关闭也是可见的。知道如何解决这个问题吗？
Thanks a lot
非常感谢
回答by Arnold Daniels
How does the Bootstrap off canvas example works?
Bootstrap off canvas 示例如何工作？
The Bootstrap offcanvas example uses the grid system. For xs screens, the content spans 12 columns (full screen width) and sidebar spans 6 columns (1/2 screen width).
Bootstrap offcanvas 示例使用网格系统。对于 xs 屏幕，内容跨越 12 列（全屏宽度），侧边栏跨越 6 列（1/2 屏幕宽度）。
Normally the sidebar would be pushed under the content. However in offcanvas.cssthere is a rule that uses absolute positioning to place it on the right top, outside the screen.
通常侧边栏会被推到内容下方。但是在offcanvas.css 中有一个规则，它使用绝对定位将其放置在屏幕外的右上角。
When you press 'Toggle nav', it moves the .rowhalf the screen width (50%) to the left, revealing the sidebar.
当您按“切换导航”时，它会将.row屏幕宽度的一半 (50%) 向左移动，从而显示侧边栏。
Why is the sidebar shown for screen widths between 768px and 992px?
为什么边栏显示的屏幕宽度在 768 像素和 992 像素之间？
Your problem is caused by the .containerplaced around the .row. A container has a fixed width for viewports above 768px. You can solve this by using width: autofor small screens.
你的问题是由引起.container周围放置.row。对于 768 像素以上的视口，容器具有固定宽度。您可以通过width: auto用于小屏幕来解决此问题。
@media (max-width: 991px) {
.container-smooth-sm {
width: auto;
max-width: none;
}
}
A more advanced off canvas plugin
更高级的画布插件
For my projects, this approach proved to limited. Therefor I've created the offcanvas pluginand navmenucomponent. The plugin can also be used to show the navbar as offcanvas menu for small screens.
对于我的项目，这种方法被证明是有限的。为此，我创建了offcanvas 插件和navmenu组件。该插件还可用于将导航栏显示为小屏幕的画布菜单。
Here are some examples using the Jasny Bootstrap offcanvas plugin
下面是一些使用 Jasny Bootstrap offcanvas 插件的例子
