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

问题描述

可以创建一个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 类 - 它不可能只使用引导类来实现两列固定流体布局 - 但我已更新我的答案，以包括一些小的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

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


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列（固定 - 流体）布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！