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

Sgt*_*ILL 7 html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

我有一个我正在创建的导航栏,它有一堆菜单和子菜单.菜单跟踪查看点并允许我的页面滚动,这不是我想要的结果.如果没有足够的空间,我希望它从右侧菜单翻转到左侧.

对于我的小提琴,我有一个快速演示,相当准确地代表我的真实导航栏.要复制我的问题,请根据您的分辨率定位网页,以便强制导航栏离开页面一侧.单击交互式选项卡和右侧列(忽略样式)单击填充系统并进入这些子菜单.除非你滚动哪个不是我想要的东西,否则他们将无法浏览页面.

我已经尝试过使用right:0;left:auto;css和我在其他讨论中找到的位置,但这没有帮助.我也尝试使用大部分工作的JQuery菜单,但没有做我需要的所有事情,因此目前不是一个选项.我怎样才能让它响应并意识到它不会溢出页面?

更新:我已经创造了一笔赏金,因为我需要一个答案.我稍微修改了这个问题.

Red*_*Red 4

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

对于我们所有人来说幸运的是,网络上有一些伟大的人为现有框架创建了这些东西。因此其他人不必发明现有的轮子。看看下面的链接。这正是您正在寻找的(至少,据我在您的问题中看到的)。

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

它与 Bootstrap 3 完全兼容。