html - Bootstrap 下拉菜单溢出而不是调整

Question

我正在创建一个导航栏，它有一堆菜单和子菜单。菜单偏离了观看点并允许我的页面滚动，这不是我想要的结果。如果没有足够的空间容纳它，我希望它从右侧菜单翻转到左侧。

对于我的 Fiddle我有一个快速演示，可以相当准确地代表我的真实导航栏。要复制我的问题，请根据您的解决方案定位网页，以便导航栏被迫离开页面的一侧。单击交互式选项卡并在右栏(忽略样式)单击填充系统并进入这些子菜单。除非您滚动，否则它们将拖出无法查看的页面，这不是我想要的。

我已经尝试使用 right:0;left:auto; 以及我在其他讨论中找到的 css 位置，但这没有帮助。我也曾尝试使用 JQuery 菜单，该菜单在大多数情况下都有效，但没有完成我需要的所有操作，因此目前还不是一个选项。我怎样才能让它响应并意识到它不会溢出页面？

更新:我已经创建了一个赏金，因为我需要一个答案。我稍微修改了问题。

Answer 1

为此，您必须使用 JavaScript 使菜单根据视口(viewport) 动态更改其样式。

对我们所有人来说幸运的是，网络上有一些很棒的人为现有框架创建了这些东西。所以其他人不必发明现有的轮子。看看下面的链接。这正是您要找的东西(至少，据我在您的问题中所见)。

http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

它与 bootstrap 3 完全兼容。