Twitter bootstrap 3 navbar下拉不显示所有元素，如果屏幕是小的，旧的浏览器 [英] Twitter bootstrap 3 navbar dropdown doesn't show all elements if screen is small, old browser

问题描述

我在我的Twitter Bootstrap 3网站有一个固定的navbar。此导航栏在左侧和右侧有下拉切换按钮。每个下拉列表里面有13个元素。在移动设备：
- 如果屏幕高度大于13元素大小一切都很好。
- 如果屏幕高度较小，则显示前8-9个元素，其他不能显示。因为没有垂直滚动条出现。只有滚动条是整页的滚动条。整页滚动条滚动页面，但不能显示导航栏下拉菜单。

如何显示垂直滚动条，或为什么无法显示滚动条？

我对于旧版浏览器有疑问。我在 Android 2.3.3浏览器中遇到此问题。也许存在某些HTML5功能的不支持。我没有检查其他小屏幕设备。

I have a fixed navbar in my Twitter Bootstrap 3 website. This navbar has dropdown toggle buttons in left and right. Each dropdown has 13 elements inside. In mobile devices: - If screen height is bigger then 13 element size everything good. - If screen height is small then first 8-9 elements are shown, other can't be shown. Because no vertical scrollbar appears. Only scrollbar is whole page's scrollbar. Whole page scrollbar scrolls the page, but navbar dropdown elements can't bew shown.

How can I show the vertical scrollbar, or why this scrollbar can't be show ?
I'm suspicious about old browsers. I get this problem in Android 2.3.3 browsers. Maybe there exists a non support of some HTML5 feature. I didn't check in other small screen devices.

jsFiddle

The red arrowed vertical scrollbar doesn't appear if device height is small:

<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation">
    <div class="navbar-header" style="text-align:center;">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-part2"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-part3" style="padding: 3px 15px;">
            <img src="http://www.wdc.com/Global/images/icons/icon_supporthelp.gif" width="24" height="24" alt="aaaa">
        </button>
        <div style="padding-top: 15px;"> <a href="/page0" title="aaa" style="color:#ffffff;margin-top:40px;">Example.com</a>

        </div>
    </div>
    <div class="collapse navbar-collapse navbar-part2">
        <ul class="nav navbar-nav">
            <li><a href="/page1">page 1</a></li>
            <li><a href="/page2">page 2</a></li>
            <li><a href="/page1">page 3</a></li>
            <li><a href="/page2">page 4</a></li>
            <li><a href="/page1">page 5</a></li>
            <li><a href="/page2">page 6</a></li>
            <li><a href="/page1">page 7</a></li>
            <li><a href="/page2">page 8</a></li>
            <li><a href="/page1">page 9</a></li>
            <li><a href="/page2">page 10</a></li>
            <li><a href="/page2">page 11</a></li>
            <li><a href="/page2">page 12</a></li>
            <li><a href="/page2">page 13</a></li>
        </ul>
    </div>
    <div class="collapse navbar-collapse navbar-part3">
        <ul class="nav navbar-nav">
            <li><a href="/page1">page 1</a></li>
            <li><a href="/page2">page 2</a></li>
            <li><a href="/page1">page 3</a></li>
            <li><a href="/page2">page 4</a></li>
            <li><a href="/page1">page 5</a></li>
            <li><a href="/page2">page 6</a></li>
            <li><a href="/page1">page 7</a></li>
            <li><a href="/page2">page 8</a></li>
            <li><a href="/page1">page 9</a></li>
            <li><a href="/page2">page 10</a></li>
            <li><a href="/page2">page 11</a></li>
            <li><a href="/page2">page 12</a></li>
            <li><a href="/page2">page 13</a></li>
        </ul>
    </div>
</nav>
    <div>
    My page contents..
    </div>

解决方案

Hmmm okay I'm going to take a swing let me know if it's wrong so I can get what you want but if you just add:

.navbar-collapse{
    max-height: 100%;
}

The collapsed navbar will go the full width so they will all show. From that point it would just be a matter of adjusting the font if you want them all on the same screen or adjusting the line-height. Anyway here is a fiddle for an example give me some feedback so I can help.

http://jsfiddle.net/kwzt3/

这篇关于Twitter bootstrap 3 navbar下拉不显示所有元素，如果屏幕是小的，旧的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！