在粘顶导航栏中滚动 Bootstrap 4

Question

我有一个问题，因为我制作了导航栏，它是粘顶的，并且有一些下拉菜单（每个下拉菜单中有许多按钮）。因此，如果设备的高度太小，它就会被裁剪，我可以获得较低的按钮。我需要知道如何在该导航栏上添加滚动。

此时它的工作原理是这样的（使用bootstrap 4.0） https://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/

在 bootstrap 3.3.7 中，它更容易，看起来像这样： https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/

只需将窗口的高度更改为 300px 即可看到效果。我需要帮助向粘性顶部折叠导航栏添加滚动功能。

Answer 1

.fixed-top {
  max-height: 100vh;
  overflow: auto;
}

...修复它。然而，它产生了另一个较小的问题：双滚动条。然而，这在手机上不是问题，因为大多数手机仅在使用时显示滚动条。（这只是桌面浏览器上的问题，当您在非移动模式下使用非常小的浏览器窗口进行测试时）。所以，实际上，这不是问题:)。

Answer 2

我用这个得到了更好的结果：

#nav_collapse {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch; // mobile safari
    max-height: 90vh;
}

几乎一样，但更精确一点

Answer 3

我对固定顶部导航栏也有同样的问题，但我在导航栏项目中也有一个下拉菜单，因此当屏幕很大并且选择下拉项目时，许多解决方案都会在导航栏本身中放置一个滚动条.

如果您遇到同样的问题，请使用此：

.navbar-collapse.show {
max-height: 90vh;
overflow-y: auto;
}

它仅适用于 navbar-collapse div，并且仅当按下切换按钮并将“show”类添加到 div 时才适用。需要 90vh，因为最后一个菜单项会从底部掉下来。

这也适用于 Bootstrap 5。