CSS 如何使用 Twitter Bootstrap 构建 2 列（固定 - 流体）布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8740779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?
提问by mbecker
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/)?
是否可以使用 Twitter Bootstrap ( http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/)创建 2 列布局（固定 - 流体）布局（http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/） ://twitter.github.com/bootstrap/）？
Do you have any solutions?
你有什么解决方案？
回答by My Head Hurts
- Another Update -
- 另一个更新 -
Since Twitter Bootstrap version 2.0 - which saw the removal of the .container-fluidclass - 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
自从 Twitter Bootstrap 2.0 版（删除了.container-fluid该类）以来，仅使用引导类就无法实现两列固定流体布局 - 但是我已经更新了我的答案以包含一些可以进行的小的 CSS 更改在您自己的 CSS 代码中，这将使这成为可能
It is possible to implement a fixed-fluid structure using the CSS found below and slightlymodified HTML code taken from the Twitter Bootstrap Scaffolding : layoutsdocumentation page:
可以使用下面的 CSS 和从 Twitter Bootstrap Scaffolding : layouts文档页面中稍微修改的 HTML 代码来实现固定流体结构：
HTML
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
/* 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)
我保留了下面的答案 - 尽管支持 2.0 的编辑使它成为一个流体解决方案 - 因为它解释了使侧边栏和内容具有相同高度背后的概念（评论中确定的提问者问题的重要部分）
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
更新正如@JasonCapriotti 在评论中指出的那样，这个问题的原始答案（为 v1.0 创建）在 Bootstrap 2.0 中不起作用。为此，我更新了支持 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 htmland bodyto 100% and create a new css class called .fillwhich has a minimum-height of 100%:
为确保主要内容至少填充屏幕高度的 100%，我们需要将html和的高度设置body为 100% 并创建一个名为的新 css 类.fill，其最小高度为 100%：
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
We can then add the .fillclass to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:
然后我们可以将.fill类添加到我们需要占据 100% 屏幕高度的任何元素。在这种情况下，我们将它添加到第一个 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 ::afterpseudo selector to add a fillerelement that will give the illusion that the two columns have the same height:
确保侧边栏和内容栏具有相同的高度是非常困难和不必要的。相反，我们可以使用::after伪选择器添加一个filler元素，该元素会产生两列具有相同高度的错觉：
.filler::after {
background-color: inherit;
bottom: 0;
content: "";
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
To make sure that the .fillerelement is positioned relatively to the .fillelement we need to add position: relativeto .fill:
为了确保该.filler元素相对定位到.fill我们需要添加元素position: relative到.fill：
.fill {
min-height: 100%;
position: relative;
}
And finally add the .fillerstyle to the HTML:
最后将.filler样式添加到 HTML：
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: 0toleft: 0.
- 如果您需要将页面左侧的元素作为填充符，则需要更改
right: 0为left: 0.
回答by Zim
Update 2018
2018 年更新
Bootstrap 4
引导程序 4
Now that BS4 is flexbox, the fixed-fluidis simple. Just set the width of the fixed column, and use the .colclass on the fluid column.
现在 BS4 是 flexbox，固定流体很简单。只需设置固定列的宽度，并使用.col流体列上的类。
.sidebar {
width: 180px;
min-height: 100vh;
}
<div class="row">
<div class="sidebar p-2">Fixed width</div>
<div class="col bg-dark text-white pt-2">
Content
</div>
</div>
http://www.codeply.com/go/7LzXiPxo6a
http://www.codeply.com/go/7LzXiPxo6a
Bootstrap 3..
引导程序 3..
One approach to a fixed-fluidlayout is using media queries that align with Bootstrap's breakpoints so that you only use the fixed width columns are larger screens and then let the layout stack responsively on smaller screens...
固定流体布局的一种方法是使用与 Bootstrap 断点对齐的媒体查询，以便您仅在较大的屏幕上使用固定宽度的列，然后让布局在较小的屏幕上响应堆叠......
@media (min-width:768px) {
#sidebar {
min-width: 300px;
max-width: 300px;
}
#main {
width:calc(100% - 300px);
}
}
Working Bootstrap 3 Fixed-FluidDemo
Working Bootstrap 3 Fixed-FluidDemo
Related Q&A:
Fixed width column with a container-fluid in bootstrap
How to left column fixed and right scrollable in Bootstrap 4, responsive?
相关问答：
在 Bootstrap 中带有容器流体的固定宽度列
如何在 Bootstrap 4 中固定左列并向右滚动，响应式？
