45

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

你有什么解决办法？

4

2 回答 2

63

- 另一个更新 -

由于 Twitter Bootstrap 版本 2.0 - 删除了.container-fluid该类 - 仅使用引导类无法实现两列固定流体布局 - 但是我已经更新了我的答案以包含一些可以进行的小 CSS 更改在您自己的 CSS 代码中，这将使这成为可能

可以使用下面找到的 CSS 和从 Twitter Bootstrap Scaffolding中获取的稍微修改的 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%，我们需要将htmland的高度设置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: 0为left: 0.
于 2012-01-05T10:38:29.013 回答
12

2018 年更新

引导程序 4

现在 BS4 是 flexbox，固定流体很简单。只需设置固定列的宽度，并使用.col流体列上的类。

.sidebar {
    width: 180px;
    min-height: 100vh;
}

<div class="row">
    <div class="sidebar p-2">Fixed width</div>
    <div class="col bg-dark text-white pt-2">
        Content
    </div>
</div>

http://www.codeply.com/go/7LzXiPxo6a

引导程序 3 ..

固定流体布局的一种方法是使用与 Bootstrap 的断点对齐的媒体查询，以便您仅使用固定宽度的列是较大的屏幕，然后让布局在较小的屏幕上响应式堆叠......

@media (min-width:768px) {
  #sidebar {
      min-width: 300px;
      max-width: 300px;
  }
  #main {
      width:calc(100% - 300px);
  }
}

Working Bootstrap 3 Fixed-Fluid Demo

相关问答：
引导程序中带有容器流体的固定宽度列
如何在引导程序 4 中固定左列和右滚动，响应式？

于 2016-03-23T12:44:44.283 回答