twitter-bootstrap 无法在移动/ipad 浏览器上浮动 twitter bootstrap 导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14206281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
unable to float twitter bootstrap navbar on mobile/ipad browsers
提问by user1429007
Using "navbar" along with "navbar-fixed-top" class floats the navigation bar on top of the page when you scroll the page down. This doesn't seem to work on mobile/ipad browsers. Why and how do we make them float on mobile browsers as well. Tried this on ipad(safari, chrome) Android(firefox) Windows Phone(IE).
当您向下滚动页面时，使用“navbar”和“navbar-fixed-top”类会使导航栏浮动在页面顶部。这似乎不适用于移动/ipad 浏览器。为什么以及如何让它们也漂浮在移动浏览器上。在 ipad(safari, chrome) Android(firefox) Windows Phone(IE) 上试过这个。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<span class="brand"><img title="Logo" alt="Logo" src="static/images/iu_logo.gif" /></span>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
<a id="homeLink" href="#">Home</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="newsLink" href="#">News</a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="loginLink"><a href="#" id="loginButton">Login</a></li>
</ul>
</div>
</div>
</div>
50 lines of text (just to have the page scrollable)
</body>
</html>
I do have the below line in the head tag to enable bootstrap-responsive for mobile devices.
我在 head 标签中有以下行来为移动设备启用引导响应。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Any suggestions
有什么建议
回答by Paolo Casciello
I had the same problem and I've investigated a little on other frameworks. Since JQuery Mobile works correctly with fixed navbar the problem must be only on Bootstrap' side, in fact they disabled it on purpose (more details below).
我遇到了同样的问题，我对其他框架进行了一些调查。由于 JQuery Mobile 与固定导航栏一起正常工作，因此问题必须仅出现在 Bootstrap 端，实际上他们是故意禁用它的（更多详细信息见下文）。
You can try basically by adding the style inline.
您基本上可以通过添加样式内联来尝试。
<div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed">
Of course you need to adjust navbar styles accordingly. I did as follows:
当然，您需要相应地调整导航栏样式。我做了如下：
/* Override Bootstrap Responsive CSS fixed navbar */
@media (max-width: 979px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
margin-left: 0px;
margin-right: 0px;
}
}
I added this after the responsive css.
我在响应式 css 之后添加了这个。
I tried with various devices... a low-cost android tablet, my highend android phone. I never tried on iOS. The most amazing thing is it works perfectly smoothon Firefox for Android.
我尝试过各种设备......一个低成本的安卓平板电脑，我的高端安卓手机。我从来没有在 iOS 上试过。最令人惊奇的是它在 Firefox for Android 上运行非常流畅。
This is one of the issues on github replied by Bootstrap's authors with references to detailed solution adopted by JQM: https://github.com/twitter/bootstrap/issues/1617
这是 Bootstrap 的作者在 github 上回答的问题之一，并参考了 JQM 采用的详细解决方案：https: //github.com/twitter/bootstrap/issues/1617
回答by Marcin Skórzewski
Bootstrap in not using fixed navbar in small screens because it is not working well in mobile devices. In bootstrap-responsive.cssyou can find:
Bootstrap 在小屏幕中不使用固定导航栏，因为它在移动设备中运行不佳。在bootstrap-responsive.css你可以找到：
@media (max-width: 979px) {
...
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
...
}
Try to delete it or just do not load bootstrap-responsive.cssstylesheet, and check what will happen on mobile devices, then you will see it is necessary :) In my low-cost Android mobile fixed elements are not fixed during scrolling. All visible screen is traversed. After scroll finishes, browser recalculates positions of fixed elements and the navbar jumps to the correct place.
尝试删除它或只是不加载bootstrap-responsive.css样式表，并检查移动设备上会发生什么，然后您会发现这是必要的:) 在我的低成本 Android 移动固定元素在滚动期间不固定。遍历所有可见屏幕。滚动完成后，浏览器重新计算固定元素的位置，导航栏跳转到正确的位置。
