编辑：

Question

我创建了一个固定顶部的bootstrap 4导航栏，该导航栏在大屏幕上展开，而在其他屏幕上折叠。我还向padding-top添加了<body>，以防止导航栏与主体内容重叠。

但是，在较小的屏幕上，使用“汉堡包”按钮展开折叠的导航栏时，它将展开并填充整个屏幕。然后，某些导航链接被隐藏（即，在显示之外）。而且，滚动不会滚动导航栏，而只会滚动导航栏下方的主体内容。

是否可以将导航栏压缩为不超过屏幕大小？或者，如何启用可滚动的导航栏？

在下面添加了图片以显示问题。

这是移动视图中的一个快照，但没有扩展导航栏：

以下是演示该导航栏占据整个视口以及仍然存在链接但在显示“外部”的问题的快照：

如果需要，这里是JSFiddle： https://jsfiddle.net/suhaib47/ef37ht06/6/

编辑：

使用@Zim提供的答案后，我现在面临另一个问题。在桌面屏幕上，导航栏将正确显示。但是，当我单击弹出的nav-items / nav-links会打开一个下拉列表时，该下拉列表位于导航栏中，并且有一个滚动条用于滚动导航栏。如何使下拉菜单显示在导航栏内容上，同时可以滚动它，但只有在导航栏折叠时才能显示。

我提供了一张图片来说明我的意思：

图片中的滚动条用于导航栏。

Answer 1

在.navbar-collapse上设置一个最大高度，该高度等于视口高度减去主体顶部填充量...

body {
  overflow: hidden;
}

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

https://www.codeply.com/go/1KXwX3I1Mh

响应式固定顶部导航栏，展开后会填满整个屏幕，隐藏某些导航链接，并且不会滚动

编辑：

1 个答案: