jquery - Bootstrap Off Canvas nav 仅在移动设备中切换

Question

我正在尝试弄清楚如何使用 Bootstrap 3 制作 Canvas 外导航(从右侧滑入)，但切换仅在视口(viewport)小于 992px 时显示，而普通 Bootstrap 导航在视口(viewport)小于 992px 时显示大于 992px。

jasny-bootstrap 是一个好的开始，但我无法弄清楚当视口(viewport)大于 992px 时如何显示正常的 Bootstrap 导航，而且我想使用最少的 JS 而不必包含整个库。

我已经从 bootstrap off canvas 页面制作了这个 fiddle ，但仍然无法弄清楚。 http://www.jsfiddle.net/UWP5V

使用以下代码实现

$(document).ready(function () {
  $('[data-toggle=offcanvas]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});

Answer 1

显示/隐藏导航栏完全在 CSS 中使用 @media 查询完成。导航栏折叠的大小定义为较小的变量 @grid-float-breakpoint-max。

要更改它，请转到 Bootstrap customizer ，为 @grid-float-breakpoint-max 输入一个值并下载定制的 Bootstrap。

Jasny Bootstrap offcanvas 应该只使用修改后的设置。