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

Question

你能解释一下offcanvas sidebar切换是如何工作的吗？

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

切换xs大小的工作，这很好，但我想让它以相同的方式工作，或任何其他大小。

---

部分回答：在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中，有一条规则使用绝对定位将其放置在屏幕外的右上方。

当您按下＆＃39;切换导航＆＃39;时，它将.row屏幕宽度的一半（50％）向左移动，露出侧边栏。

---

为什么侧边栏的屏幕宽度介于768px和992px之间？

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

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

---

更高级的画布插件

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

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

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