问题描述
可以创建一个2列布局(固定 - 流体)布局()与Twitter Bootstrap(http://twitter.github.com) / bootstrap /)?
您有什么解决方案吗?
- 另一个更新 -
自从Twitter Bootstrap 2.0版本 - 删除了 .container-fluid
类 - 它不可能只使用引导类来实现两列固定流体布局 - 但我已更新我的答案,以包括一些小的CSS变化在您自己的CSS代码中,这将使这成为可能
可以使用下面的CSS实现一个固定流体结构, em> 修改的HTML代码 文档页面:
HTML
< div class =container-fluid fill>
< div class =row-fluid>
< div class =fixed> <! - 我们希望这个div是固定宽度 - >
...
< / div>
< div class =hero-unit filler> <! - 我们删除了spanX类 - >
...
< / div>
< / div>
< / div>
CSS
/ * CSS用于固定流体布局* /
.fixed {
width:150px; / *所需的固定宽度* /
float:left;
}
.fixed + div {
margin-left:150px; / *必须匹配.fixed类中的固定宽度* /
overflow:hidden;
}
/ * CSS确保侧边栏和内容是相同的高度(可选)* /
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%的屏幕height,我们需要将 html
和 body的高度设置为100%,并创建一个新的css类
.fill
其最小高度为100%:
html, body {
height:100%;
}
.fill {
min-height:100%;
}
然后我们可以添加 .fill
类到任何我们需要占据sceen高度的100%的元素。在这种情况下,我们将它添加到第一个div:
< div class =container-fluid fill>
...
< / div>
要确保侧栏和内容列具有相同的高度是非常困难和不必要的。相反,我们可以使用 :: 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
:
.fill {
min-height:100% ;
position:relative;
}
最后添加 .filler
HTML的样式:
HTML
code>< div class =container-fluid fill>
< div class =row-fluid>
< div class =span3>
...
< / div>
< div class =span9 hero-unit filler>
...
< / div>
< / div>
< / div>
- 如果您需要页面左侧的元素作为填充,那么您需要将
右:0
更改为left:0
。
Is it possible to create a 2 Column Layout (Fixed - Fluid) Layout ( http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/) with Twitter Bootstrap (http://twitter.github.com/bootstrap/)?
Do you have any solutions?
- Another Update -
Since Twitter Bootstrap version 2.0 - which saw the removal of the .container-fluid
class - it has not been possible to implement a two column fixed-fluid layout using just the bootstrap classes - however I have updated my answer to include some small CSS changes that can be made in your own CSS code that will make this possible
It is possible to implement a fixed-fluid structure using the CSS found below and slightly modified HTML code taken from the Twitter Bootstrap Scaffolding : layouts documentation page:
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;
}
I have kept the answer below - even though the edit to support 2.0 made it a fluid-fluid solution - as it explains the concepts behind making the sidebar and content the same height (a significant part of the askers question as identified in the comments)
Important
Answer below is fluid-fluid
UpdateAs pointed out by @JasonCapriotti in the comments, the original answer to this question (created for v1.0) did not work in Bootstrap 2.0. For this reason, I have updated the answer to support Bootstrap 2.0
To ensure that the main content fills at least 100% of the screen height, we need to set the height of the html
and body
to 100% and create a new css class called .fill
which has a minimum-height of 100%:
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
We can then add the .fill
class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:
<div class="container-fluid fill">
...
</div>
To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the ::after
pseudo selector to add a filler
element that will give the illusion that the two columns have the same height:
.filler::after {
background-color: inherit;
bottom: 0;
content: "";
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
To make sure that the .filler
element is positioned relatively to the .fill
element we need to add position: relative
to .fill
:
.fill {
min-height: 100%;
position: relative;
}
And finally add the .filler
style to the HTML:
HTML
<div class="container-fluid fill">
<div class="row-fluid">
<div class="span3">
...
</div>
<div class="span9 hero-unit filler">
...
</div>
</div>
</div>
Notes
- If you need the element on the left of the page to be the filler then you need to change
right: 0
toleft: 0
.
这篇关于如何用Twitter Bootstrap构建一个2列(固定 - 流体)布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!