折叠式菜单对于移动设备而言太长了 [英] Collapsible menu is too long for mobile landscape

问题描述

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

I'm having an issue with a collapsible menu I created in Bootstrap 3. It works great until its viewed in landscape from a mobile device. When you expand the menu in landscape, the links drop down farther than the viewport. That wouldn't be a problem, but the menu is fixed to the top, meaning the user cannot scroll down to see the hidden links bellow. Whenever the user scrolls, the menu stays put and the elements behind the fixed navbar move (though you cannot see it move because of the menu overlay). Here is a pic:

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％，但是我仍然无法使这些链接适合或至少滚动.还有其他人有这个问题吗?任何帮助将不胜感激！

I tried to set the .nav-justified container to have a max-width of 100%, but I'm still unable to make these links fit or at least scroll. Has anyone else has this problem? Any help would be greatly appreciated!

推荐答案

这是一个古老的问题，但也许我的回答可以对某人有所帮助.

It is an old question, but maybe my answer can help to someone.

Bootstrap将添加到.navbar-collapse.collapse媒体查询: @media(最小宽度:768像素){overflow:visible！important} ，它可以在横向模式下阻止滚动菜单. 但！ 如果您使用的正确视口元标记带有"width = device-width"，则不会出现此问题，因为这样， .navbar-collapse.in {overflow-y:auto} 就会被应用引导移动领域.

Bootstrap adds to .navbar-collapse.collapse the media query: @media(min-width: 768px) { overflow:visible!important } which can block scrolling menu on landscape mode. BUT! If you are using the correct viewport meta tag with "width=device-width" you shouldn’t have this issue, because then .navbar-collapse.in { overflow-y: auto } is applied by bootstrap on mobile landscape.

之所以会这样，是因为媒体查询取决于视口声明. 这可能会很令人困惑，所以现在我要说的是，我有两种类型的临时响应标头，其中包含引导折叠的导航栏(出于某种原因)，其中之一使用了正确的视口元标记:"width = viewport-width， initial-scale = 1"，另一个使用"uncorrect":"initial-scale = 0.5"而没有"width = viewport-width". (这很愚蠢，我知道，但是我现在必须解决一些问题，并且必须在某些页面上保持桌面在移动设备上的外观……)

It happens, because media queries depend from viewport declaration. It can be pretty confusing, so right now I’m just telling, I have temporary two type of responsive header with bootstrap collapsing navbar (for some reason), one of them uses the correct viewport meta tag: "width=viewport-width, initial-scale=1", the other uses the "uncorrect": "initial-scale=0.5" WITHOUT "width=viewport-width". (It is stupid, I know but I have to solve something right now, and I have to keep the desktop appearance on mobile on some pages…)

重要的是要了解引导程序添加的媒体查询在正确的视口元标记下可以正常工作.

The important part is to understand that bootstrap added media queries can work correctly with correct viewport meta tag.

我希望能提供帮助，我能提供更多信息，但这更多地与视口和媒体查询连接有关. 这有助于理解: http://www.quirksmode.org/blog/archives/2010/09 /combining_meta.html

I hope I could help, I could tell much more, but it relates more to viewport and media queries connection. This can help for understanding: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

这篇关于折叠式菜单对于移动设备而言太长了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！