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;
}

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

滚动折叠菜单Bootstrap中的内容

2 个答案: