Bootstrap 导航栏垂直折叠离开屏幕，因为导航栏上的内容太大

Question

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

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

我需要其他药丸不要离开屏幕，并且它们中的任何一个内的菜单至少有一个滚动条或有点列表，我可以在不花太多时间的情况下浏览它 space页面的，有谁知道我该怎么做？谢谢

P.S:抱歉我的英语不好

Answer 1

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

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

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

此外，您需要调整 .nav。您会希望它具有指定的宽度，并且您会希望使用 display: block 代替 table-cell 以便获得全角链接。

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

Bootstrap 导航栏垂直折叠离开屏幕，因为导航栏上的内容太大

Bootstrap navbar collapsed vertical going off screen 'cuz the size of the content on the nav-pills are too big

html

css

collapsable

twitter-bootstrap

nav-pills