使用引导程序的响应式布局和一切都工作得很好,但是当我通过iPad访问它时,导航栏不会崩溃.
Printscreen – 在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:
解决方法
您需要更改导航栏折叠断点.
这是将其更改为991px的示例
@media (max-width: 991px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .navbar-text { float: none; margin: 15px 0; } .navbar-collapse.collapse.in { display: block!important; } .collapsing { overflow: hidden!important; } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。