0

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

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

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

使用以下代码实现

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

2 回答 2

2

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

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

Jasny Bootstrap offcanvas 应该可以简单地使用修改后的设置。

于 2014-05-31T09:33:50.727 回答
0

你会为那个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">
于 2014-10-29T22:30:59.490 回答