jquery - 可折叠菜单对于移动横向来说太长

Question

我在使用 Bootstrap 3 中创建的可折叠菜单时遇到问题。在从移动设备横向查看之前，它一直很好用。当您横向展开菜单时，链接会下降到比视口(viewport)更远的位置。这不是问题，但菜单固定在顶部，这意味着用户无法向下滚动以查看下面的隐藏链接。每当用户滚动时，菜单保持不变，固定导航栏后面的元素移动(尽管由于菜单覆盖你看不到它移动)。这是一张照片:

HTML:

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">                          
            <button class="navbar-toggle" data-toggle="collapse"data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>         
            <div class="collapse navbar-collapse navHeaderCollapse">      
                <ul class="nav nav-justified">
                    <li><a id="navHistory" class="history" href="#">History</a></li>
                    <li><a id="navEvents" class="events" href="#">Events</a></li>
                    <li><a id="navSponsors" class="sponsors" href="#">Sponsors</a></li>
                    <li><a id="navEntertainment" class="entertainment" href="#">Entertainment</a></li>
                    <li><a id="navGallery" class="gallery" href="#">Gallery</a></li>            
                    <li><a id="navContact" class="contact" href="#">Contact</a></li>     
                </ul>     
            </div>
        </div>
    </div>
</div><!--Navbar End-->

CSS:

.navbar.navbar-default.navbar-fixed-top {
    background-color: transparent;
    border: none;
}
.navbar.navbar-default.navbar-fixed-top .navbar-inner {
    height: 95px;
    background-image: url('../img/top_red.png');
    box-shadow: none;
    border: none;
    -webkit-box-shadow: none;
}
.navbar.navbar-default.navbar-fixed-top .navbar-inner .container {
    background-color: #d0112b;
    margin: 0 auto;
}
.navbar .nav > li > a {
    font-size: 18px;
    color: #ffffff;
    font-family: 'sanchezregular';
    line-height: 25px;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #d0112b;
}
.navbar .nav > li > a:hover, .navbar .nav > li > a:active {
    color: #ffffff;
    background-color: transparent;
}

我尝试将 .nav-justified 容器的最大宽度设置为 100%，但我仍然无法使这些链接适合或至少无法滚动。还有其他人有这个问题吗？任何帮助将不胜感激!

Answer 1

这是一个老问题，但也许我的回答对某些人有帮助。

Bootstrap 添加到 .navbar-collapse.collapse 媒体查询: @media(min-width: 768px) { overflow:visible!important } 可以在横向模式下阻止滚动菜单。 但! 如果您使用带有“width=device-width”的正确视口(viewport)元标记，则不应出现此问题，因为 .navbar-collapse.in { overflow-y: auto } 被应用在移动设备上 Bootstrap 。

它发生了，因为媒体查询依赖于视口(viewport)声明。 这可能非常令人困惑，所以现在我只是说，我有两种临时的响应式 header ，带有 Bootstrap 折叠导航栏(出于某种原因)，其中一种使用正确的视口(viewport)元标记:“width=viewport-width， initial-scale=1”，另一个使用“不正确”:“initial-scale=0.5”，没有“width=viewport-width”。 (这很愚蠢，我知道，但我现在必须解决一些问题，我必须在某些页面上保持桌面在移动设备上的外观……)

重要的部分是了解 Bootstrap 添加的媒体查询可以使用正确的视口(viewport)元标记正常工作。

我希望我能提供帮助，我可以说得更多，但它更多地涉及视口(viewport)和媒体查询连接。 这有助于理解: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html