如何在容器外显示导航栏下拉菜单？答案

【问题标题】：How to show navbar dropdown menu outside container?如何在容器外显示导航栏下拉菜单？
【发布时间】：2019-03-19 10:37:28
【问题描述】：

所以在这个问题之前，我一直在努力让导航栏在展开时在较小的屏幕上滚动。 SO链接：responsive fixed-top navbar when expanded fills up screen, hides some of the nav-links, and does not scroll

使用该问题中的答案，我能够使导航栏滚动，但随后我遇到了一个新问题。当点击导航栏链接时，弹出的下拉菜单会留在导航栏容器内，并且导航栏可以滚动。

一张图说明（本例中为OLE下拉菜单）：

这是用于使折叠的导航栏可滚动的 CSS。

.fixed-top .navbar-collapse {
    max-height: calc(100vh - 4.5em);
    overflow-y: auto;
}

navbar折叠时没有问题，可以很好的显示下拉菜单和滚动。但是，当没有在大屏幕上折叠时，如何使下拉菜单显示在导航栏容器之外？

这是我针对这个问题的 JSFiddle：https://jsfiddle.net/suhaib47/7b58o0d3/3/
注意：使结果视口足够宽，以便导航栏可以完全显示。单击 OLE 下拉菜单，您必须向下滚动才能看到下拉菜单。

当我在容器外显示下拉菜单时，菜单无法在较小的屏幕上滚动。当菜单可以滚动时，我无法让下拉菜单显示在导航容器之外。

如何使下拉菜单显示在导航栏容器之外？同时，我希望响应式导航栏在小屏幕上展开时可以滚动。

我发现了一个类似的 SO 问题，但无法解决我的问题：The navbar dropdown menu does not beyond the container

【问题讨论】：

你能附上你的代码吗？
@Gerard 我添加了一些 css 代码和一个 JSFiddle 链接
这似乎在 jsfiddle 中工作正常
调整结果窗口的宽度，以便不再显示“汉堡”切换图标，并且可以看到导航栏及其链接。点击 OLE 链接，您会看到下拉菜单没有弹出，而是停留在容器内，您最终在导航栏中滚动查看它。
你应该把它放到媒体查询中

标签： html css twitter-bootstrap drop-down-menu overflow

【解决方案1】：

希望无需使用媒体查询就可以解决此问题。不过，我确实能够使用媒体查询来解决这个问题。

@media only screen and (max-height: 450px) {
    .fixed-top .navbar-collapse {
        max-height: calc(100vh - 4.5em);
        overflow-y: auto;
    }
}

这种滚动方式在需要时可用，具体取决于显示大小/方向，即当导航栏菜单折叠时。

【讨论】：