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

问题描述

可以创建一个2列布局(固定 - 流体)布局()与Twitter Bootstrap(http://twitter.github.com) / bootstrap /)?



您有什么解决方案吗?

解决方案

- 另一个更新 -



自从Twitter Bootstrap 2.0版本 - 删除了 .container-fluid 类 - 它不可能只使用引导类来实现两列固定流体布局 - 但我已更新我的答案,以包括一些小的CSS变化在您自己的CSS代码中,这将使这成为可能



可以使用下面的CSS实现一个固定流体结构, em> 修改的HTML代码 文档页面:



HTML



 < div class =container-fluid fill> 
< div class =row-fluid>
< div class =fixed> <! - 我们希望这个div是固定宽度 - >
...
< / div>
< div class =hero-unit filler> <! - 我们删除了spanX类 - >
...
< / div>
< / div>
< / div>



CSS



  / * CSS用于固定流体布局* / 

.fixed {
width:150px; / *所需的固定宽度* /
float:left;
}

.fixed + div {
margin-left:150px; / *必须匹配.fixed类中的固定宽度* /
overflow:hidden;
}


/ * CSS确保侧边栏和内容是相同的高度(可选)* /

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%的屏幕height,我们需要将 html body的高度设置为100%,并创建一个新的css类 .fill 其最小高度为100%:

  html, body {
height:100%;
}

.fill {
min-height:100%;
}

然后我们可以添加 .fill 类到任何我们需要占据sceen高度的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

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






  • 如果您需要页面左侧的元素作为填充,那么您需要将右:0 更改为 left:0


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

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

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

  • If you need the element on the left of the page to be the filler then you need to change right: 0 to left: 0.

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

08-15 05:51