如何使用Twitter Bootstrap构建2列(固定-流体)布局?
你有什么解决方案?
-另一个更新-
自从Twitter Bootstrap版本2.0(看到.container- fluid该类已删除)以来,不可能仅使用bootstrap类来实现两列固定流体布局- 但是我更新了我的答案以包括一些可以进行的小的CSS更改在您自己的CSS代码中,这将使其成为可能
.container- fluid
可以使用下面的CSS以及从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 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%,并创建一个新的css类.fill,其最小高度为100%:
html
body
.fill
html, body { height: 100%; } .fill { min-height: 100%; }
然后,我们可以将.fill类添加到需要占用屏幕高度100%的任何元素中。在这种情况下,我们将其添加到第一个div中:
<div class="container-fluid fill"> ... </div>
确保补充工具栏和内容列具有相同的高度是非常困难且不必要的。取而代之的是,我们可以使用::after伪选择器添加一个filler元素,该元素会给人以错觉,即两列的高度相同:
::after
filler
.filler::after { background-color: inherit; bottom: 0; content: ""; right: 0; position: absolute; top: 0; width: inherit; z-index: -1; }
为了确保.filler元素相对于.fill元素定位,我们需要添加position: relative到.fill:
.filler
position: relative
.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>
笔记
right: 0
left: 0