无法在移动/ipad 浏览器上浮动 twitter 引导导航栏
Posted
技术标签:
【中文标题】无法在移动/ipad 浏览器上浮动 twitter 引导导航栏【英文标题】：unable to float twitter bootstrap navbar on mobile/ipad browsers 【发布时间】：2013-01-08 00:09:32 【问题描述】：当您向下滚动页面时，将“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" 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>
我确实在 head 标记中有以下行，以便为移动设备启用引导响应。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
任何建议
【问题讨论】：
【参考方案1】：我遇到了同样的问题，并且我对其他框架进行了一些调查。 由于 JQuery Mobile 在固定导航栏上正常工作，因此问题必须仅在 Bootstrap 端，实际上他们故意禁用了它（下面有更多详细信息）。
基本上你可以通过添加内联样式来尝试。
<div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed">
当然，您需要相应地调整导航栏样式。 我做了如下：
/* Override Bootstrap Responsive CSS fixed navbar */
@media (max-width: 979px)
.navbar-fixed-top,
.navbar-fixed-bottom
position: fixed;
margin-left: 0px;
margin-right: 0px;
我在响应式 css 之后添加了这个。
我尝试了各种设备......低成本的安卓平板电脑，我的高端安卓手机。 我从未在 ios 上尝试过。 最令人惊奇的是它在 Firefox for Android 上运行完美流畅。
这是Bootstrap的作者在github上回复的问题之一，参考了JQM采用的详细解决方案：https://github.com/twitter/bootstrap/issues/1617
【讨论】：
此解决方案适用于除 Windows Phone 之外的所有设备。谢谢【参考方案2】：在小屏幕中不使用固定导航栏的引导程序，因为它在移动设备中无法正常工作。在bootstrap-responsive.css你可以找到：
@media (max-width: 979px)
...
.navbar-fixed-top,
.navbar-fixed-bottom
position: static;
...
尝试删除它或不加载bootstrap-responsive.css 样式表，并检查移动设备上会发生什么，然后你会发现它是必要的:) 在我的低成本Android 移动固定元素在滚动期间不固定。遍历所有可见屏幕。滚动完成后，浏览器重新计算固定元素的位置，导航栏跳转到正确的位置。
【讨论】：
非常感谢，它工作正常。在我使用 Android 2.2 的旧 Android HTC 手机上，元素在滚动期间是固定的。如果有人在使用 Phonegap，请查看 config.xml 中的选项以上是关于无法在移动/ipad 浏览器上浮动 twitter 引导导航栏的主要内容，如果未能解决你的问题，请参考以下文章
Twitter Bootstrap 弹出框/工具提示错误与移动设备？