我正在使用bootstrap 3.1.1构建一个响应式页面,我想移动导航栏,使其在非智能手机屏幕上查看时低于其他一些div.有关示例,请参见下图.
我试图使用bootstrap pull / push类(参见代码)来做到这一点,但我似乎无法正确组合.它正在显示我打算用于智能手机,但不是更大的设备.
HTML
<div class="row"> <div class="col-xs-12 col-sm-push-12"> <div class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div class="col-sm-6 col-sm-pull-12"> <h1>First Title heading</h1> </div> <div class="col-sm-6 col-sm-pull-12"> <h1>Second Title heading</h1> </div> </div> </div>
解决方法
它可以使用jQuery轻松完成.有两个div,一个在顶部,另一个在底部.现在,当您有一个大屏幕尺寸时,如果屏幕尺寸很小,请将导航栏的html提供给上面的div,并将其提供给底部.
这是它的样子:
if (screenSize > 1280px) $(#topnav).html('Your navbar HTML here'); else $(#bottomnav).html('Your navbar HTML here');
topnav和bottomnav是两个div.
您现在唯一需要弄清楚的是如何获得屏幕尺寸.以下是它的完成方式:
$(window).resize(function(){ var screenSize = $(window).width(); });
现在只需将HTML插入其中即可.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。