可折叠菜单是流动的风景太长时间(Collapsible menu is too long for m

我有一个可折叠的菜单我创建了引导3.直到它的景观从移动设备观看它的伟大工程的问题。 当您展开横向菜单，链接下拉大于视远。 这不会是一个问题，但菜单固定在顶部，这意味着用户无法向下滚动才能看到隐藏的链接波纹管。 每当用户滚动，菜单原地踏步和背后的导航栏固定移动的元素（虽然你不能看到它，因为重叠的菜单的移动）。 这里是一个事先知情同意：

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对齐容器具有100％的最大宽度，但我仍然无法使这些链接配合或者至少滚动。 有任何人有这个问题吗？ 任何帮助将不胜感激！

Answer 1:

这是一个老问题，但也许我的回答能帮助到别人。

自举增加.navbar-collapse.collapse媒体查询：@media（最小宽度：768px）{溢出：可见重要}它可以在风景模式方框滚动菜单。 但！ 如果您使用的是带有“宽度=设备宽度”正确的视口元标记，你不应该有这个问题，因为那时.navbar-collapse.in {溢出-Y：自动}被引导在移动应用的风景。

碰巧的是，因为媒体的质疑从视声明依赖。 它可以是非常令人迷惑，所以现在我只是告诉我有短暂的两级式自举倒塌导航栏响应头（出于某种原因），其中之一使用了正确的视口元标记：“WIDTH =视口宽度，初始规模= 1” ，其他的使用‘uncorrect’：‘初始规模= 0.5’没有‘宽度=视区宽度’。 （这是愚蠢的，我知道，但我必须马上解决的东西，我必须不断移动的桌面外观上的一些网页...）

最重要的部分是要明白，引导添加媒体查询可以用正确的视口元标记正常工作。

我希望我能帮助，我可以告诉更多，但它涉及更多的视口和媒体查询连接。 这可以帮助理解： http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Answer 2:

“溢出-Y：汽车;溢出：隐藏;” - 将使用户能够滚动。

对于DIV扩大视口的100％，应设置“的立场：绝对”和高度为100％

.navbar.navbar-default.navbar-fixed-top .navbar-inner {
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    ...
}

例如： http://jsfiddle.net/Lem5z/3/

文章来源: Collapsible menu is too long for mobile landscape