引导导航栏折叠垂直离开屏幕'因为导航药丸上的内容太大

Question

所以，我的页面左侧有一个垂直折叠的导航栏，当我单击导航药丸时，菜单内容应显示在它们下方，但是，信息太多而且它正在离开屏幕，我有一个药丸，上面有 13 个元素，它在页面的最底部，几乎所有内容都离开了屏幕，我该怎么做才能让它向上或将其余内容固定到容器的底部打开的药丸有一个滚动条，因此我可以浏览它们。

导航栏有点像这样：http://www.bootply.com/0TBt8gDdsr

我需要其他药丸不要离开屏幕，并且它们中的任何一个里面的菜单至少有一个滚动条或一个小列表，我可以在不占用太多页面空间的情况下导航，有人吗？知道我该怎么做吗？谢谢。

P.S：对不起，我的英语不好。

Answer 1

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

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

这将使您的第一个菜单（包含 10 多个链接的菜单）具有固定高度和滚动条。不幸的是，Bootstrap 的 JS 确实会触发让它一直向下扩展，然后它会跳回固定高度。

此外，您还需要调整您的.nav。你会希望它有一个指定的宽度，你会想要使用display: block 代替table-cell，这样你就有了全宽链接。

.nav 的固定宽度有助于防止下拉菜单的滚动条出现在屏幕的最右侧。全角链接只是很好的用户界面。