Html 引导导航栏垂直折叠离开屏幕'；因为nav药片上的内容物太大了

我在页面的左边有一个垂直折叠的导航条，当我点击导航按钮时，菜单内容会显示在导航按钮下，但是，信息太多了，它会离开屏幕，我有一个有13个元素的导航按钮，它在页面的最底部，几乎所有的导航按钮都会离开屏幕，我该怎么做才能让它向上移动，或者让其余的内容固定在容器底部，打开的药丸有一个滚动条，这样我就可以浏览它们了

导航栏有点像这样：

我需要其他药片不要离开屏幕，它们里面的菜单至少要有一个滚动条或一个小列表，这样我就可以在不占用太多页面空间的情况下浏览，有人知道我该怎么做吗？谢谢

---

附言：很抱歉我的英语不好。

您需要一些额外的修补，以使过渡更平滑，但要仅解决大菜单的问题，请应用以下CSS：

#cadastros-menu {
    height: 200px;
    overflow-y: auto;
}

这将导致您的第一个菜单（具有10+链接的菜单）具有固定高度和滚动条。不幸的是，Bootstrap的JS启动后，它会一直向下扩展，然后又跳回到固定高度

此外，您还需要调整

.nav

。您希望它具有指定的宽度，并且您希望使用

display:block

来代替

表格单元格

，以便具有全宽度链接

---

.nav

上的固定宽度有助于防止下拉菜单的滚动条出现在屏幕的最右侧。全宽链接只是一个很好的UI。

你可以减少填充，为什么导航链接的高度是55px？因为它在整个页面中看起来更好，在我的实际代码中更改填充并不会改变任何东西…好吧，css工作得很好，但我不明白为什么要使用显示：块而不是表格单元格，当我更改它时，文本会上升，这里看起来很奇怪，还有，你知道怎么让菜单向上打开吗？感谢

block

将使您的主链接占据100%的宽度。现在，它们只占用链接标题和相关填充所需的足够空间。您可以尝试使用

。dropup

查看是否有效；它是一个有效的引导类，但我不知道它是否能在这个用例中运行。