Question

我试图弄清楚如何使用Bootstrap 3制作一个非画布导航（从右侧滑入），但切换只显示视口小于992px时的正常引导导航以显示视口大于992px。

jasny-bootstrap是一个很好的开始，但我不知道如何在视口大于992px时显示正常的Bootstrap导航，我也想使用最少量的JS而不必包含整个库。

我从画布页面的引导程序中制作了这个小提琴，但仍然无法弄明白。 http://www.jsfiddle.net/UWP5V

使用以下代码

实现

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

Answer 1

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

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

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

Answer 2

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

查看您的示例修改

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">

Bootstrap Off Canvas仅在移动设备中导航切换

2 个答案: