无法在移动/ ipad浏览器上浮动twitter bootstrap导航栏 [英] unable to float twitter bootstrap navbar on mobile/ipad browsers
问题描述
当您向下滚动页面时，使用navbar和navbar-fixed-top类会在页面顶部浮动导航栏。这似乎不适用于移动/ ipad浏览器。我们为什么以及如何让它们在移动浏览器上浮动。在ipad（safari，chrome）Android（firefox）Windows Phone（IE）上试过这个。
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).
<!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>
我在head标签中有以下行，以便为移动设备启用bootstrap响应。
I do have the below line in the head tag to enable bootstrap-responsive for mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
任何建议
推荐答案
我遇到了同样的问题，我对其他框架进行了一些调查。
由于JQuery Mobile在固定导航栏上正常工作，问题必须只在Bootstrap'侧，实际上他们是故意禁用它（更多细节如下）。
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).
您可以通过添加内联样式来尝试。
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;
}
}
我在响应式css之后添加了这个。
I added this after the responsive css.
我尝试了各种设备......一款低成本的Android平板电脑，我的高端Android手机。
我从未在iOS上尝试过。
最令人惊奇的是它在Firefox for Android上运行非常流畅。
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 smooth on Firefox for Android.
这是github上的一个问题回复者Bootstrap的作者参考了JQM采用的详细解决方案： https://github.com/twitter/bootstrap/ issue / 1617
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
这篇关于无法在移动/ ipad浏览器上浮动twitter bootstrap导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
