小编典典

如何使用Twitter Bootstrap构建2列(固定-流体)布局?

css

如何使用Twitter Bootstrap构建2列(固定-流体)布局?

你有什么解决方案?


阅读 276

收藏
2020-05-16

共1个答案

小编典典

-另一个更新-

自从Twitter Bootstrap版本2.0(看到.container- fluid该类已删除)以来,不可能仅使用bootstrap类来实现两列固定流体布局-
但是我更新了我的答案以包括一些可以进行的小的CSS更改在您自己的CSS代码中,这将使其成为可能

可以使用下面的CSS以及从Twitter Bootstrap
Scaffolding:layouts文档页面获取的经过 稍微 修改的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 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 {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

然后,我们可以将.fill类添加到需要占用屏幕高度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

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

笔记

  • 如果需要页面左侧的元素作为填充符,则需要更改right: 0left: 0
2020-05-16