Bootstrap导航栏卡住了

Question

我正在使用bootstrap来创建响应式网站。在移动设备上，当在文本框内单击时，键盘会出现并向上推动屏幕，隐藏导航栏。如果在键盘仍处于运转状态时单击按钮，则键盘会消失，但导航栏会在页面的中间位置卡住（我猜测它预先在页面上的位置）。我附上了一些照片。我使用默认的bootstrap代码只通过css进行颜色更改（没有定位或任何东西，只是改变颜色）。我已经附加了3张图像，正常，文本框打开，并在文本框打开后单击按钮。任何人有任何想法为什么或如何解决它？

这是导航栏的html：

<div class="navbar navbar-default navbar-fixed-top padding-top" role="navigation">
    <div class="container padding-top">
        <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="#">Title</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="login.html" id="logout">Logout</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

这是CSS：

.navbar-default {
    background-color: #79a137;
    border-color: #79a137;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #000000;
}
.navbar-default .navbar-text {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #000000;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #000000;
    background-color: #79a137;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #000000;
    background-color: #79a137;
}
.navbar-default .navbar-toggle {
    border-color: #79a137;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #79a137;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ffffff;
}
.navbar-default .navbar-link {
    color: #ffffff;
}
.navbar-default .navbar-link:hover {
    color: #000000;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #000000;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #000000;
        background-color: #79a137;
    }
}