[英]Bootstrap navbar not fixed top for mobile
For some reason, my html file will not have the navbar fixed at the top when the website is accessed through a mobile phone. 由于某些原因,当通过手机访问网站时,我的html文件的导航栏不会固定在顶部。 It is, however, fixed at the top for my PC web browsers.
但是,它固定在我的PC Web浏览器的顶部。 What exactly is wrong here?
这到底是怎么了?
Note: If I remove responsive.css, then the mobile version is fixed at the top, but not responsive. 注意:如果删除active.css,则移动版本固定在顶部,但没有响应。 Various different answers suggested nav bar fixed top, 0 pixel padding, and user scalable no.
建议使用各种不同的答案导航栏固定顶部,0像素填充和用户可缩放编号。 None of those seemed to work for me.
这些似乎都不适合我。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<title>T6</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 0px;
padding-bottom: 0px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
</head>
<br><br><br>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="#">TMedia</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="/Polar/about.html">About</a></li>
<li><a href="/Polar/login2.html">Login</a></li>
<li><a href="/Polar/contact.html">Contact Us</a>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<a href="http://google.com">
<img src="google.jpg" alt="HTML tutorial" width="100" height="100"></a></p>
<a href="http://yahoo.com">
<img src="yahoo.jpg" alt="HTML tutorial" width="100" height="100"></a></p>
<!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Actually, my only problem here was my version of Bootstrap. 实际上,我唯一的问题是我的Bootstrap版本。
In the above code, I was running 2.2.2 and it does not support all mobile aspects fully. 在上面的代码中,我正在运行2.2.2,它不完全支持所有移动方面。 After ugprading to 3.0.3, everything works fine.
升级至3.0.3后,一切正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.