滚动折叠菜单内的内容 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

您只需要在 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;
}

如果您希望它根据屏幕大小动态调整，则需要在 window resize 上设置高度。

Answer 2

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

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

滚动折叠菜单内的内容 Bootstrap

Scroll the content inside the collapse menu Bootstrap

jquery

html

css

twitter-bootstrap

collapse