引导画布菜单显示小于 992px答案

【问题标题】：bootstrap off canvas menu reveal smaller then 992px引导画布菜单显示小于 992px
【发布时间】：2014-06-17 23:34:09
【问题描述】：

我正在为off canvas bootstrap menu 使用我见过的最好的插件。如果屏幕宽度大于 992 像素，我正在尝试公开（显示）菜单。

我正在尝试复制当前在我的网站上使用的导航。尝试调整浏览器的大小，导航菜单会以较小的分辨率折叠。这是通过一些 javascript 完成的，如下所示：

$(document).ready(function () {
    var n, t;
    desktop ? (n = $(".sidebar .wrapper").height(), t = $(document).height(), $(".content").css("min-height", n), $(".sidebar").css("min-height", t + 200)) : (n = $(".sidebar .wrapper").height(), t = $(document).height(), $(".content").css("min-height", n), $(".sidebar").css("min-height", t + 200)), $(".toggle-sidebar").click(function () {
        $("body").toggleClass("show-sidebar")
    });
});

知道如何使用 jasny 的 off canvas 插件实现同样的效果吗？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap-3

【解决方案1】：

Jasny Bootstrap 支持此功能，如 this example 所示。

只需使用offcanvas-sm 而不是offcanvas。

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
   ...
</div>

作为记录，offcanvas 插件非常灵活。它适用于display: none 隐藏的任何元素，并忽略任何未隐藏的元素。您可以使用@media 将元素隐藏在您喜欢的任何视口宽度。

【讨论】：