Question

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

对于我的Fiddle，我有一个快速演示，相当准确地代表我的真实导航栏。要复制我的问题，请根据您的分辨率定位网页，以便强制导航栏离开页面一侧。单击交互式选项卡和右侧列（忽略样式）单击填充系统并进入这些子菜单。除非你滚动哪个不是我想要的东西，否则它们将会在页面上落后。

我已经尝试过使用ref以及css的位置，正如我在其他讨论中找到的那样，但这没有帮助。我也试过使用一个大部分工作的JQuery菜单，但没有做我需要的所有事情，因此目前不是一个选项。我怎样才能让它响应并意识到它不能从页面上溢出来？

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

Answer 1

要执行此操作，您必须使用JavaScript使菜单根据视口动态更改其样式。

Luckely对我们所有人来说，网上有一些伟大的人为现有的框架创造了这些东西。所以其他人不必发明现有的车轮。请看下面的链接。这是你要找的东西（至少，就我在你的问题中看到的那样）。

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

它与bootstrap 3完全兼容。

Answer 2

用于临时修复（非动态）

使用以下CSS规则

ul.dropdown-menu.dropdown-inverse {
    position: absolute;
    left:-58% 
    /* Overriding value from 100% defined in ".dropdown-submenu > .dropdown-menu"  */

    margin-right: 200px;
    margin-left: -60px;
}

对于响应式解决方案，基本上计算每个菜单的宽度并将其添加。

然后从屏幕宽度中减去该值，然后将上述类添加到主题中。

Fiddle Link

Answer 3

在媒体查询中使用此css规则（有问题的宽度）。它应该根据我认为你想要的东西进行排序

.dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: -92%;
   margin-top: -6px;
   margin-right: -1px;
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px 6px;
   border-radius: 0 6px 6px 6px;
}

Fiddle

Answer 4

试试这个：

.dropdown-submenu > .dropdown-toggle:hover + .dropdown-menu{
    display: block ;
  }

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

4 个答案: