css - ASP.NET MVC Bootstrap iPhone 导航栏 UI 问题

Question

我已经使用 Visual Studio 2013 中的默认值设置了一个新的 ASP.NET MVC 网站。我已经更新了所有正在使用的库，以便安装最新版本的 Bootstrap 和其他 CSS、JavaScript 和 MS 库.

我发现，如果您添加带验证的基本表单，Bootstrap 导航栏不会停留在顶部，它会落到 iPhone 屏幕的中间。这是一个截图:

您会注意到菜单位于屏幕中间，而不是顶部。

要复制，请在 iPhone 上打开 URL，只需单击提交，这将导致验证错误并显示 UI 问题。

请注意，我已经删除了捆绑，以便我们可以看到各个链接。为了方便起见，我还把它们都放在了标题中，而不是我们在生产中会做的事情。

锚定导航栏的解决方案是什么？

Answer 1

在熟练的 CSS 程序员的帮助下，我能够通过以下更新解决问题:

Bootstrap 后运行以下 JavaScript:

var is_ios = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
      if(is_ios) {
        $(document)
        .on('focus', 'input, textarea', function(e) {
            $('body').addClass('fixfixed');
        })
        .on('blur', 'input, textarea', function(e) {
            $('body').removeClass('fixfixed');
        });        
      }

添加了以下 CSS 更新:

.form .form-control {
  font-size: 16px;
}

.fixfixed .navbar {
  position: relative;
  top: auto;
}