Bootstrap Off Canvas仅在移动端切换导航

Question

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

jasny-bootstrap是一个很好的开始，但我想不出当viewport大于992px时如何显示正常的Bootstrap nav，而且我想使用最少的JS而不需要包含整个库。

我已经从bootstrap off canvas页面做了这个小提琴，但仍然不能弄明白。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的值并下载自定义引导程序。

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

Answer 2

您可以对该http://getbootstrap.com/css/#responsive-utilities使用BS响应实用程序

查看修改后的示例

http://jsfiddle.net/freedawirl/wL4d7m3w

可用类使用单个可用类或可用类的组合在视口之间切换内容

断点。

Extra small devices = Phones (<768px) use .visible-xs or .hidden-xs
Small devices = Tablets (≥768px) use .visible-sm or .hidden-sm  
Medium devices = Desktops (≥992px) use .visible-md or .hidden-md    
Large devices = Desktops (≥1200px) use .visible-lg or .hidden-lg    

根据需要调整以下内容

<!-- Desktop Nav -->
<div class="navbar navbar-fixed-top navbar-inverse  visible-sm" role="navigation">

<!-- Mobile Nav -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas visible-xs" id="sidebar"  role="navigation">

 <!-- So that list shows up with nav call -->
 <div class="list-group visible-xs">