Bootstrap下拉菜单在移动设备上不完整可见

Question

我在网站的移动版本上遇到问题，由于特定菜单项的位置和下拉列表中的项目数量，下拉菜单未完全显示在视图中

下面的图片是我希望它出现的方式，因此当点击父级时它会聚焦该区域。

是否可以将菜单向下滚动以显示点击时的所有子项目？

您可以在http://www.ndb.ie/2016/查看网站。它使用标准的Bootstrap菜单代码。

Answer 1

您应该覆盖引导程序样式。

.navbar-collapse.in {
    overflow-y: visible!important;
}

Answer 2

将此CSS放入style.css文件

响应式中心菜单

@media only screen and (max-width: 767px) {
    .nav-justified > .dropdown .dropdown-menu {
        left: 50% !important;
        margin-left: -80px; /* (Half Menu Width in margin left) */
        top: 100%;
    }
}

用于删除响应式滚动

.navbar-collapse.in {
    overflow-y: visible !important;
}