我使用Bootstrap实现了响应式布局,一切都工作得很完美,但是当我通过iPad访问时,导航栏不会折叠。
截图 - iPad预览:
http://i.stack.imgur.com/RjEJ0.jpg
以下是我的HTML / CSS代码:
HTML:
<header class="header">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand scroll-top logo">
<img src="assets/images/logo_cass_eventos.jpg">
</a>
</div>
<!--/.navbar-header-->
<div id="main-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="mainNav">
<li class="active"><a href="#" class="scroll-link">Home</a></li>
<li><a href="#" class="scroll-link">Eventos empresariais</a></li>
<li><a href="#" class="scroll-link">Eventos sociais</a></li>
<li><a href="#" class="scroll-link">Leme Gourmet</a></li>
<li><a href="#" class="scroll-link">Vídeos</a></li>
<li><a href="#" class="scroll-link">Depoimentos</a></li>
<li><a href="#" class="scroll-link">Imprensa</a></li>
<li><a href="#" class="scroll-link">Contato</a></li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
</div>
<!--/.container-->
</header>
CSS: