我正在使用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>
答案 0 :(得分:1)
使用jQuery可以轻松完成。有两个div
,一个在顶部,另一个在底部。现在,当您拥有较大的屏幕尺寸时,如果屏幕尺寸很小,请将导航栏的html提供给上面的div
,然后提供给底部的html。
这就是它的样子:
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插入其中即可。
答案 1 :(得分:0)
你必须使用'pull'将元素放在左边和顶部,然后'push'将它放在右边和底部。所以你以错误的方式使用这些类。颠倒这两个,它会工作!