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

Question

你能解释一下offcanvas sidebar切换的工作原理吗？

我不能让sm的实际侧边栏消失.我可以使按钮可见(visible-sm),但切换不起作用 - 侧边栏始终可见.

切换适用于xs大小,这很好,但我想让它以相同的方式工作,或任何其他大小.

---

部分答案: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 */
}

但是仍然存在一个问题 - 当画布宽度介于780和991px之间时,即使关闭了侧边栏,侧边栏也是可见的.知道如何解决这个问题吗？

非常感谢

Answer 1

Bootstrap off canvas示例如何工作？

Bootstrap offcanvas示例使用网格系统.对于xs屏幕,内容跨越12列(全屏宽度),侧栏跨越6列(1/2屏幕宽度).

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

当您按下"切换导航"时,它将.row屏幕宽度的一半(50%)向左移动,显示侧边栏.

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

你的问题是由.container放置在周围的.row.容器具有固定宽度,用于768px以上的视口.您可以通过使用width: auto小屏幕来解决这个问题.

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

一个更高级的画布插件

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

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

• 滑动效果
• 推动效果
• 揭示效果
• Offcanvas导航栏