Bootstrap offcanvas 侧边栏切换任何画布大小

Question

您能否解释一下画布侧边栏切换的工作原理？

我无法让 sm 的实际侧边栏消失。我可以使按钮可见（visible-sm），但切换不起作用 - 侧边栏始终可见。

切换适用于 xs 尺寸，这很好，但我想让它以同样的方式适用于 sm，或者任何其他尺寸。

---

部分答案：在 offcanvas.css 中更改 max-width 也可以切换更大的尺寸，在这种情况下为 sm：

@media screen and (max-width: 991px) {
  /* 991px instead of 767px makes toggling work for sm as well */

  .row-offcanvas {
    /* ... */
  }

  /* and so on */
}

但是还有一个问题——当画布宽度在 780 到 991px 之间时，即使关闭侧边栏也是可见的。知道如何解决这个问题吗？

非常感谢

Answer 1

Bootstrap off canvas 示例如何工作？

Bootstrap offcanvas 示例使用网格系统。对于 xs 屏幕，内容跨越 12 列（全屏宽度），侧边栏跨越 6 列（1/2 屏幕宽度）。

通常侧边栏会被推送到内容下方。但是在offcanvas.css 中有一条规则使用绝对定位将其放置在屏幕外的右上角。

当您按下“切换导航”时，它会将屏幕宽度的一半 (50%) 的 .row 向左移动，从而显示侧边栏。

---

为什么屏幕宽度在 768px 和 992px 之间时会显示侧边栏？

您的问题是由位于.row 周围的.container 引起的。对于 768 像素以上的视口，容器具有固定宽度。对于小屏幕，您可以使用 width: auto 来解决此问题。

@media (max-width: 991px) {
    .container-smooth-sm {
        width: auto;
        max-width: none;
    }
}

---

更高级的 off canvas 插件

对于我的项目，这种方法被证明是有限的。为此，我创建了 offcanvas plugin 和 navmenu 组件。该插件还可用于将导航栏显示为小屏幕的画布菜单。

以下是一些使用 Jasny Bootstrap offcanvas 插件的示例

• Slide in effect
• Push effect
• Reveal effect
• Offcanvas navbar