Question

我需要使用Bootstrap 3的导航栏，但它似乎是一个小小的车。在我的Lumia 820上，我检查了默认导航栏，但我无法滚动导航栏内菜单的内容。我可以滚动菜单后面的主体而不是菜单。在桌面上，我可以使用overflow：auto CSS滚动菜单的内容，但在我的手机上我无法滚动，也无法自动或隐藏..任何想法？

图片在这里：http://i.stack.imgur.com/8lxXj.png

Answer 1

我想在正确的解决方案中添加一些修补程序。特别是修复折叠动画：

.navbar-nav {
  height: 100vh; // <-- This will fix the collapse animation
}

.navbar-collapse.in {     
   overflow-x: hidden;
   padding-right: 17px; // <-- Hide scroll bar, but still being able to scroll
}

@media (min-width: 768px) {
    .navbar-nav {
        height: auto;
    }
}

Answer 2

您可以使用以下jQuery代码修复它：

$（“。navbar-collapse”）。css（{maxHeight：$（window）.height（） - $（“。navbar-header”）。height（）+“px”}）;

Answer 3

您可能正在描述open issue #12738 "Can't scroll to last collapsed navbar item on mobile when there are many items"？

Answer 4

虽然这个问题已经很老了，但我想提出解决方案或更好地解决这个问题，也许这对某些人有帮助。

我在iPhone 4S上的Safari浏览器上的响应式网站遇到了与webprogramozo相同的问题：我无法向下滚动到菜单末尾的菜单点。相反，我看到菜单后面的主体滚动。为了避免这种情况，我有想法在菜单打开时隐藏菜单后面的主体。这不是一个解决方案，而是一个适合我的好方法。

/**
 * Bootstrap menu scroll-problem fix:
 * Makes the content below the menu invisible while the menu is open.
 *
 */
$(document).ready(function() {
    $('.navbar-toggle').click(function () {

        var expanded = $('.navbar-toggle').attr('aria-expanded');

        if (expanded == 'false') {
            $('.main-container').hide();
        } else {
            $('.main-container').show();
        }
    });
});

Bootstrap 3：打开导航栏的内容无法在移动设备上滚动

4 个答案: