Question

我正在使用最新的bootstrap（3.0.3）构建一个webapp。我通过从bootstap文档复制粘贴创建了导航栏，如下所示：

<nav class="navbar navbar-inverse navbar-fixed-top green">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Smart Pigs</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#" id="online-offline" toggle="offline"><span class="glyphicon glyphicon-off"></span>&nbsp;Go offline</a>
            </li>
            <li>
                <a href="http://10.10.10.1/SmartPigs.apk" name="download"><span aria-hidden="true" class="agrosoft-download"></span>&nbsp;Update App</a>
            </li>
            <!-- <li>
                <a href="#" id="open"><span class="agrosoft-bluetooth"></span>&nbsp;Bluetooth</a>
            </li> -->
        </ul>
    </div><!-- /.navbar-collapse -->

</nav><!-- end navbar -->

我正在手机和Nexus 7平板电脑上进行测试。每当我折叠导航栏时，导航栏顶部都会出现白边。如果我关闭菜单，白色边距消失。

我还注意到如果我在导航菜单中放置了足够多的链接，我需要滚动到导航的底部，白线边距也会消失。

问题是我的导航只有2个链接，当我在平板电脑上将其折叠时，我总是得到最高限度。这非常令人沮丧。我只在平板电脑上看到这种行为。在手机和PC浏览器上它工作正常。我不知道出了什么问题。请帮忙。

bootstrap 3 navbar-fixed-top在导航栏折叠时获得顶部白色边距

0 个答案: