-3

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

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

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

PS:对不起我的英语不好。

4

1 回答 1

2

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

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

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

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

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

于 2016-07-07T13:28:09.177 回答