我不能让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之间时,即使关闭了侧边栏,侧边栏也是可见的.知道如何解决这个问题吗?
非常感谢
解决方法
Bootstrap offcanvas示例使用网格系统.对于xs屏幕,内容跨越12列(全屏宽度),侧栏跨越6列(1/2屏幕宽度).
通常情况下,侧边栏会被推到内容下方.但是在offcanvas.css中,有一条规则使用绝对定位将其放置在屏幕外的右上方.
当您按下“切换导航”时,它会将屏幕宽度(50%)的.row移动到左侧,显示侧边栏.
为什么侧边栏的屏幕宽度介于768px和992px之间?
您的问题是由.row周围的.container引起的.容器具有固定宽度,用于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
原文地址:https://www.jb51.cc/js/159803.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。