Bootstrap Navbar 卡在移动设备上

Posted 2023-03-15

【中文标题】Bootstrap Navbar 卡在移动设备上

【英文标题】：Bootstrap Navbar gets stuck on mobile

【发布时间】：2014-08-07 13:11:59

【问题描述】：

我正在使用 Cordova 构建一个跨平台应用程序。我正在为我的框架使用引导程序，并且在导航栏上遇到了一些麻烦。我没有为它或任何东西使用任何特殊的 CSS。这是我的代码：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#">Header</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">Terms & Conditions</a></li>
            <li><a id="logout">Logout</a></li>
        </ul>
    </div>
    <!--/.nav-collapse -->
</div>

这是我的视口设置，以防万一：

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi"/>

当显示键盘时（当我在文本字段中时），导航栏会被向上推。如果我在键盘打开时单击一个按钮，键盘就会消失，导航栏会卡在页面的中间（我猜键盘打开时它在哪里）。我已经对其进行了屏幕录制以更好地解释。在这里：https://vid.me/zIc

此外，在 Cordova 中，我有“DisallowOverscroll=true”，因此如果不需要，您无法滚动。如果我将此设置为 false，它仍然会发生，但如果我滚动一点点，它就会跳到位！

【参考方案1】：

这似乎是我的视口设置。我删除了“height=device-height”，它现在似乎可以工作了！