Question

我遇到了一个我在Bootstrap 3中创建的可折叠菜单的问题。它在通过移动设备进行横向浏览之前效果很好。在横向展开菜单时，链接会比视口下拉得更远。这不是问题，但菜单固定在顶部，这意味着用户无法向下滚动以查看隐藏的链接。每当用户滚动时，菜单保持不变并且固定导航栏后面的元素移动（尽管由于菜单覆盖，您无法看到它移动）。这是一张照片：

landscape view from iphone

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”的正确视口元标记，则不应该出现此问题，因为 .navbar-collapse.in {overflow-y：auto} 应用于移动环境中的自举。

它发生了，因为媒体查询依赖于视口声明。它可能非常令人困惑，所以现在我只是告诉我，我有临时两种类型的响应头，带有bootstrap折叠导航栏（出于某种原因），其中一个使用正确的视口元标记：“width = viewport-width， initial-scale = 1“，另一个使用”uncorrect“：”initial-scale = 0.5“WITHOUT”width = viewport-width“。（这是愚蠢的，我知道，但我现在必须解决一些问题，而且我必须在某些页面上保持移动设备上的桌面外观......）

重要的是要了解引导添加的媒体查询可以正确使用正确的视口元标记。

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

Answer 2

“overflow-y：auto; overflow：hidden;” - 将使用户能够滚动。

要让DIV展开100％的视口，你应该将“position：absolute”和height设置为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/

Answer 3

在Bootstrap中，将此CSS添加到导航栏的<ul>

max-height: 85vh;

解决了这个问题。

如果智能手机处于横向模式并且引导导航栏对于屏幕而言过高，它将创建2（或更多）列

可折叠菜单对于移动设备来说太长了

3 个答案: