是否可以使用Twitter Bootstrap (http://twitter.github.com/bootstrap/) 创建一个两列布局(固定-自适应)布局(http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/)?
你有什么解决方案吗?
是否可以使用Twitter Bootstrap (http://twitter.github.com/bootstrap/) 创建一个两列布局(固定-自适应)布局(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 文档页面)来实现固定流体结构:
<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;
}
更新 如@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
类。在本例中,我们将其添加到第一个<div class="container-fluid fill">
...
</div>
.filler::after {
background-color: inherit;
bottom: 0;
content: "";
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
.filler
元素相对于.fill
元素定位,需要在.fill
中添加position: relative
属性:.fill {
min-height: 100%;
position: relative;
}
.filler
样式:
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
。更新2018
Bootstrap 4
现在BS4是flexbox,定宽-流式布局(fixed-fluid)非常简单。只需设置固定列的宽度,并在流动列上使用.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
Bootstrap 3..
实现固定-流式布局的一种方法是使用媒体查询,与Bootstrap的断点对齐,这样你只需在较大的屏幕上使用固定宽度列,然后在较小的屏幕上让布局在响应式地堆叠...
@media (min-width:768px) {
#sidebar {
min-width: 300px;
max-width: 300px;
}
#main {
width:calc(100% - 300px);
}
}
相关问答:
在bootstrap中使用容器-流体布局实现固定列宽
如何在Bootstrap 4中使左侧列固定,右侧可滚动且响应式?