是否可以使用Twitter Bootstrap(http://twitter.github.com/bootstrap/)创建2列布局(固定 – 流体)布局(
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/)?
你有什么解决办法?
解决方法
– 另一个更新 –
由于Twitter Bootstrap 2.0版本 – 删除了.container-fluid类 – 它不可能只使用bootstrap类来实现两列固定流体布局 – 但是我已经更新了我的答案以包括一些小的CSS更改可以在你自己的CSS代码,这将使这成为可能
它可以实现一个固定流体结构使用下面的CSS和稍微修改的HTML代码取自Twitter Bootstrap Scaffolding : layouts文档页面:
HTML
<div class="container-fluid fill"> <div class="row-fluid"> <div class="fixed"> <!-- we want this div to be fixed width --> ... </div> <div class="hero-unit filler"> <!-- we have removed spanX class --> ... </div> </div> </div>
CSS
/* CSS for fixed-fluid layout */ .fixed { width: 150px; /* the fixed width required */ float: left; } .fixed + div { margin-left: 150px; /* must match the fixed width in the .fixed class */ overflow: hidden; } /* CSS to ensure sidebar and content are same height (optional) */ html,body { height: 100%; } .fill { min-height: 100%; position: relative; } .filler:after{ background-color:inherit; bottom: 0; content: ""; height: auto; min-height: 100%; left: 0; margin:inherit; right: 0; position: absolute; top: 0; width: inherit; z-index: -1; }
我一直保持下面的答案 – 即使支持2.0的编辑使它成为一个流体 – 流体解决方案 – 因为它解释了使侧边栏和内容相同高度的概念(在评论中确定的问题的重要部分)
重要
下面的答案是流体流体
更新
正如@JasonCapriotti在评论中指出的,这个问题(为v1.0创建的)的原始答案没有在Bootstrap 2.0中工作。因此,我更新了支持Bootstrap 2.0的答案
为了确保主内容填充至少100%的屏幕高度,我们需要将html和body的高度设置为100%,并创建一个名为.fill的新css类,其最小高度为100%:
html,body { height: 100%; } .fill { min-height: 100%; }
然后,我们可以将.fill类添加到任何元素,我们需要占据100%的sceen高度。在这种情况下,我们将它添加到第一个div:
<div class="container-fluid fill"> ... </div>
要确保侧栏和内容列具有相同的高度是非常困难和不必要的。相反,我们可以使用:: after伪选择器来添加填充元素,这将给出两个列具有相同高度的错觉:
.filler::after { background-color: inherit; bottom: 0; content: ""; right: 0; position: absolute; top: 0; width: inherit; z-index: -1; }
为了确保.filler元素相对于.fill元素放置,我们需要添加position:相对于.fill:
.fill { min-height: 100%; position: relative; }
最后,将.filler样式添加到HTML:
HTML
<div class="container-fluid fill"> <div class="row-fluid"> <div class="span3"> ... </div> <div class="span9 hero-unit filler"> ... </div> </div> </div>
笔记
>如果你需要页面左边的元素作为填充,那么你需要改变右:0到左:0。