我喜欢 bootstrap 3 的 off canvas 功能:http: //getbootstrap.com/examples/offcanvas/。但是,对于我的一个项目,我希望它与内容重叠,而不是将内容移到一边。这可能吗?如果有怎么办?
这就是我所说的重叠:
我喜欢 bootstrap 3 的 off canvas 功能:http: //getbootstrap.com/examples/offcanvas/。但是,对于我的一个项目,我希望它与内容重叠,而不是将内容移到一边。这可能吗?如果有怎么办?
这就是我所说的重叠:
更新(基于您的评论和新草图)
html:
<div class="container">
<div class="row">
<div class="col-sm-9" style="background-color:lightgreen;height:500px;">
Content
<button id="navigator">Show Nav</button>
</div>
<div class="sidenav col-sm-3" style="background-color:red;height:100px;">Nav</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div><!--/.container-->
CSS:
@media (max-width: 767px)
{
.sidenav
{
position: absolute;
top: 50px;
height: 0px;
width: 0px;
overflow: hidden;
left:100%;
padding:0;
}
.sidenav.on
{
width:50%;
left:50%;
-webkit-transition: all 2s ease 0s;
-moz-transition: all 2s ease 0s;
-o-transition: all 2s ease 0s;
transition: all 2s ease 0s;
}
}
javascript:
$('#navigator').click(function(){$('div.sidenav').toggleClass('on');});
--
是的,请参阅:http ://bootply.com/77207
画布外功能不是引导程序的默认功能。这个演示展示了你可以用 Bootstrap、css、mediaqueries 和 javascript (jQuery) 做什么。
1)媒体查询在屏幕宽度低于768px时隐藏侧边栏(css负右位置) 2)点击按钮将class .active添加到内容(包括侧边栏) 3)css用class设置内容的位置.active 向左,... %(正右侧位置)内容隐藏(在视口外)并且导航栏变得可见。4)显示/隐藏的效果是用CSS3过渡完成的http://www.w3schools.com/css3/css3_transitions.asp
在原始示例中,内容 swift 50%,将其更改为 100%(或更多)将产生重叠的效果。
也许还可以看到: 使用 Twitter Bootstrap 2.x 在移动设备上切换侧边栏(易于迁移到 TB3)