我有一个基于 Twitter Bootstrap 的流畅布局。
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
如果侧边栏具有固定宽度,那就太好了。如果将布局从流体更改为“静态”并将侧边栏的宽度设置为
220px
我调整窗口大小或将分辨率更改为 1024...正文内容跳转到侧边栏下方。我怎样才能避免这种情况?
编辑:
知道了。稍后将发布我的“解决方案”。感谢您的回复
我认为你看起来像这样:
<div class="sidebar span4">
this is my fixed sidebar
</div>
<div class="main">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">this is fluid</div>
<div class="span3 offset1">yeah!</div>
<div class="span6">Awesome!</div>
</div>
<div class="row-fluid">
<div class="span6">1 half</div>
<div class="span6">2 half</div>
</div>
</div>
</div>
为了您的方便,这里有一个小提琴:http://jsfiddle.net/TT8uV/2/
一般注意事项:
您不需要使用 bootstrap 作为您的“主容器”,因此您可以将您的
侧边栏与网格系统并排(如 bootstrap
流畅且反应灵敏)。这样你就有了A LOT的控制权
侧边栏,不影响实际内容。
希望对你有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)