css – 如何使用Twitter Bootstrap构建一个2列(固定 – 流体)布局?

前端之家收集整理的这篇文章主要介绍了css – 如何使用Twitter Bootstrap构建一个2列(固定 – 流体)布局?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用Twitter Bootstrap(http://twitter.github.com/bootstrap/)创建2列布局(固定 – 流体)布局( 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文档页面

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%,并创建一个名为.fill的新css类,其最小高度为100%:

html,body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

然后,我们可以将.fill类添加到任何元素,我们需要占据100%的sceen高度。在这种情况下,我们将它添加到第一个div:

<div class="container-fluid fill">
    ...
</div>

要确保侧栏和内容列具有相同的高度是非常困难和不必要的。相反,我们可以使用:: after伪选择器来添加填充元素,这将给出两个列具有相同高度的错觉:

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

为了确保.filler元素相对于.fill元素放置,我们需要添加position:相对于.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>

笔记

>如果你需要页面左边的元素作为填充,那么你需要改变右:0到左:0。

原文链接:https://www.f2er.com/css/221963.html

猜你在找的CSS相关文章