我试图弄清楚如何使用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')
});
});
答案 0 :(得分:2)
使用@media查询在CSS中完全显示/隐藏导航栏。导航栏将折叠的大小定义为变量较小的@grid-float-breakpoint-max
。
要更改它,请转到Bootstrap customizer,输入@grid-float-breakpoint-max
的值并下载自定义的Bootstrap。
Jasny Bootstrap offcanvas应该只使用修改过的设置。
答案 1 :(得分:0)
您可以使用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">