Joh*_*ert 5 html nav responsive-design twitter-bootstrap responsiveness
我一直在各种设备上测试我的bootstrap网站,以确保它的响应能力.我已经为除了导航栏之外的不同显示尺寸正确调整了大小.在我的浏览器上,当我水平调整窗口大小时,它似乎响应,按预期折叠菜单,但在移动设备上,我仍然看到导航栏就像在台式机或笔记本电脑上的全屏窗口中显示一样.这是我的导航栏的代码:
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="WinShir" src="img/rocket.png" /> WinShir
</a>
<button type='button' class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="sr-only">Toggle Navigation</span>
</button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li><a href="#signInModal" data-toggle="modal">Sign In</a></li>
<li><a href="#signupModal" data-toggle="modal">Sign Up</a></li>
</ul>
</div>
</nav>
</div>
我已经尝试将nav元素更改为div,看看是否有帮助但没有成功.我还删除了封闭的容器类div,看看是否有帮助,也没有运气.
Thi*_*ark 21
您可能没有设置视口.把<head>它放进去,看它是否有所作为.
<meta name="viewport" content="width=device-width, initial-scale=1">
| 归档时间： |
|
| 查看次数： |
8082 次 |
| 最近记录： |