Jquery Bootstrap3.0中的水平导航菜单-如果我有很多主菜单，如何在其顶部添加上一个上一个箭头？

我使用3.0并实现了导航菜单。桌面到移动视图的媒体查询断点为800像素。所以基本上在800像素的屏幕上，我想显示桌面视图。在一个更宽的屏幕上，比如桌面，我可以在一行中显示所有12个左右的主菜单。但如果我使用iPad，比如说我只能得到980像素。在这个小屏幕上，我的菜单有两行。我不能减少主菜单的数量

如何在引导导航的顶部设置上一个上一个下一个箭头，使菜单始终位于一行中，并在桌面模式下遍历所有可用的菜单

我需要实现这样的东西

我创建了一个简单的JSFIDLE引导导航，它有12个主菜单。请将结果部分扩展到足够宽，以便在桌面模式下显示导航，如下所示：

小提琴链接：

fiddle图像

---

最简单的方法是可以使用jQuery插件
比如：

还有更多

这里可以看到一个演示

$（文档）.ready（函数（）{
$（“div#mySliderTabs”）.sliderTabs（）；
});















这个应该可以：


$（'.direction right'）。单击（函数（）{
var margin=$（'.navbar-nav'）.css（'margin-top'）；
控制台日志（页边距）；
console.log（'-'+（$（'.navbar-nav'）.height（）-50）+'px'）；
$（'.navbar-nav'）.css（'margin-top'，margin='-'+（$（'.navbar-nav'）.height（）-50）+'px'？margin:'-=50px'）；
});
$（'.direction left'）。单击（函数（）{
var margin=$（'.navbar-nav'）.css（'margin-top'）；
$（'.navbar nav'）.css（'margin-top'，margin='0px'？'0px'：'+=50px'）；
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
$（'.navbar-nav'）.css（'margin-top'，0）；
}
});
@介质（最大宽度：768px）{
.方向右，.方向左{
显示：无；
}    
}
@介质（最小宽度：768px）{
navbar先生{
高度：51px；
溢出：隐藏；
}
.导航栏导航{
溢出：隐藏；
宽度：钙（100%-52px）；
}
.方向右，.方向左{
显示：块；
}
}














你能创建一个演示吗？只对选项卡有用，但如果你在navbarWell中有指向其他页面的链接，你就不能用#来放置你的页面url。这是常识。谢谢你的帮助，但我不认为通过这种方式我将能够添加滑动动画。否则这真的很好。很难添加一个滑块，因为你不知道你的导航会持续多长时间。可能的解决方案：当您点击右键时，您得到左li元素的宽度，并从ul元素的左边距替换它。使用“隐藏溢出”，使其不在可见部分。可以使用jquery animate实现滑块效果；）