Bootstrap 3.0中的水平导航菜单 – 如果我有很多主菜单，如何在其上添加上一个下一个箭头？
我正在使用Bootstrap 3.0并实现了导航菜单。 我的桌面到移动视图的媒体查询断点是800像素。 所以基本上在800像素的屏幕上加上我想显示桌面视图。 在像桌面这样的更宽屏幕上，我能够在一行中显示所有12个左右的主菜单。 但是，如果我去iPad，那么我只得到980像素。 在这个较小的屏幕中，我的菜单有两行。 我无法减少主菜单数量。
如何在Bootstrap导航的顶部制作上一个 – 下一个箭头，以便菜单总是在一行中，我可以在桌面模式下遍历所有可用菜单？
我需要实现这样的东西。
我创建了一个简单的引导程导航jsFiddle，有12个主菜单。 请将结果部分展开得足够宽，以便在桌面模式下显示导航，如下所示：
小提琴链接： 链接 fiddle image
http://jsfiddle.net/vijayP/k63t7tqo
这应该工作：
$('.direction-right').click(function() { var margin = $('.navbar-nav').css('margin-top'); console.log(margin); console.log('-' + ($('.navbar-nav').height() - 50) + 'px'); $('.navbar-nav').css('margin-top', margin == '-' + ($('.navbar-nav').height() - 50) + 'px' ? margin : '-=50px'); }); $('.direction-left').click(function() { var margin = $('.navbar-nav').css('margin-top'); $('.navbar-nav').css('margin-top', margin == '0px' ? '0px' : '+=50px'); }); $(window).resize(function() { if ($(window).width() < 768) { $('.navbar-nav').css('margin-top', 0); } });
@media (max-width: 768px) { .direction-right, .direction-left { display: none; } } @media (min-width: 768px) { .navbar { height: 51px; overflow: hidden; } .navbar-nav { overflow: hidden; width: calc(100% - 52px); } .direction-right, .direction-left { display: block; } }