滚动折叠菜单内的内容 Bootstrap

Question

我正在尝试找到一个简单的解决方案，以便在移动设备上折叠时从折叠菜单中提出内容的滚动。我的意思是，当菜单打开时，我想先推荐折叠菜单的滚动而不是正文。

在 CSS 中有什么技巧可以解决这个问题吗？还是只有 JS 脚本？

Here is my link（请在手机端查看）

我的 HTML 代码：

 <a role="button" data-toggle="collapse" data-target="#NavbarCollapse" class="nav-link navbar-toggler hidden-md-up"><span class="icon-menu"></span></a>

<div class="row">
                      <div class="collapse navbar-toggleable-sm hidden-md-up col-xs-12" id="NavbarCollapse">
                        <ul class="nav navbar-nav text-center">
                          <li class="nav-item active col-xs-12"><a href="#">Tableau de bord</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Mon agenda</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Messagerie<span class="label label-primary label-pill">17</span></a></li>
                          <li class="nav-item col-xs-12"><a href="#">Mes patients</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Activité</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Mon cabinet virtuel</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Informations administratives</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Informations bancaires</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Informations profil</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Aide</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Déconnexion</a></li>
                        </ul>
                      </div>
                    </div>

希望我的问题对你们来说很清楚。 非常感谢。

Answer 1

为侧边栏导航添加滚动功能。

#NavbarCollapse{
   max-height: 50vh;
   overflow-y: auto;
}

Answer 2

你只需要在 UL 上固定一个高度并启用溢出：

ul.nav.navbar-nav
{
    height: 100px;
    overflow-y: auto;
}

如果你只是想要全高：

ul.nav.navbar-nav
{
    height: 60vh;  // The rest of your display is 30-40% on smaller heights
    overflow-y: auto;
}

如果您希望它动态调整到屏幕大小，则需要在窗口调整大小时设置高度。