Bootstrap导航栏折叠垂直关闭屏幕'cuz nav-pills内容的大小太大

Question

所以，我的导航栏折叠垂直在我的页面左侧，当我点击nav-pills菜单内容显示在它们的正下方，但是，它有太多的信息，它会在屏幕外显示，我有一个像13个元素的药片，它位于页面的最底部，几乎所有的信息都离开屏幕，我可以做些什么来使其向上或使其余的内容固定在容器的底部，并且打开的药丸有一个滚动条，这样我就可以在它们之间导航。

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

我需要其他药片不会熄灭屏幕，里面任何一个菜单至少有一个小名单的滚动条或有点，我可以浏览网页时不占用太多空间，有谁知道我该怎么做？谢谢。

对不起，我的英语不好。

Answer 1

你会想一些额外的修修补补，使过渡更平滑，但只解决了大菜单的问题，应用以下CSS：

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

这将导致你的第一个菜单（一个具有10个以上的链接）具有固定的高度和滚动条。不幸的是，Bootstrap的JS做了火，让它一直向下扩展，然后跳回到固定高度。

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

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