如何使用 Twitter Bootstrap 构建 2 列(固定 - 流体)布局? [英] How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

查看：29
本文介绍了如何使用 Twitter Bootstrap 构建 2 列(固定 - 流体)布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以创建 2 列布局(固定 - 流体)布局 ( http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/) 与 Twitter Bootstrap (http://twitter.github.com)/bootstrap/)?

你有什么解决办法吗?

解决方案

- 另一个更新 -

自从 Twitter Bootstrap 2.0 版(删除了 .container-fluid 类)以来，不可能仅使用bootstrap 类 - 但是我已经更新了我的答案以包含一些可以在您自己的 CSS 代码中进行的小的 CSS 更改，这将使这成为可能

可以使用下面的 CSS 和稍微修改来自 Twitter Bootstrap 的 HTML 代码来实现固定流体结构脚手架:布局 文档页面:

HTML

<div class="row-fluid"><div class="fixed"><!-- 我们希望这个 div 是固定宽度的 -->...
<div class=英雄单元填充物"><!-- 我们已经删除了 spanX 类-->...

CSS

/* 固定流体布局的 CSS */.固定的 {宽度:150px；/* 所需的固定宽度 */向左飘浮;}.fixed + div {左边距:150px；/* 必须匹配 .fixed 类中的固定宽度 */溢出:隐藏；}/* CSS确保侧边栏和内容高度相同(可选)*/html，正文{高度:100%；}.填 {最小高度:100%；位置:相对；}.填充物:之后{背景色:继承；底部:0；内容:《》；高度:自动；最小高度:100%；左:0；边距:继承；右:0；位置:绝对；顶部:0；宽度:继承；z-索引:-1；}

我保留了下面的答案 - 尽管支持 2.0 的编辑使它成为一个流畅的解决方案 - 因为它解释了使侧边栏和内容具有相同高度背后的概念 (提问者问题的重要部分如评论中所述)

重要

下面的答案是流体

更新正如@JasonCapriotti 在评论中指出的那样，这个问题的原始答案(为 v1.0 创建)在 Bootstrap 2.0 中不起作用.为此，我更新了答案以支持 Bootstrap 2.0

为了确保主要内容至少填充屏幕高度的100%，我们需要将html和body的高度设置为100%，并创建一个名为 .fill 的新 css 类的最小高度为 100%:

html, body {高度:100%；}.填 {最小高度:100%；}

然后我们可以将 .fill 类添加到我们需要占据 100% 屏幕高度的任何元素.在本例中，我们将其添加到第一个 div:

...

确保侧边栏和内容栏具有相同的高度是非常困难和不必要的.相反，我们可以使用 ::after 伪选择器添加一个 filler 元素，这将产生两列具有相同高度的错觉:

.filler::after {背景色:继承；底部:0；内容:《》；右:0；位置:绝对；顶部:0；宽度:继承；z-索引:-1；}

为了确保 .filler 元素相对于 .fill 元素定位，我们需要将 position: relative 添加到 >.fill:

.fill {最小高度:100%；位置:相对；}

最后将 .filler 样式添加到 HTML 中:

HTML

<div class="row-fluid"><div class="span3">...
<div class="span9 hero-unitfiller">...

注意事项

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

Update As 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

这篇关于如何使用 Twitter Bootstrap 构建 2 列(固定 - 流体)布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆