logo标签列表

如何使用Twitter Bootstrap构建一个2列（固定-流动）布局？

csstwitter-bootstrapbootstrap-4fluid-layout
45
侧边栏和内容列必须具有相同的高度（最小高度：100%）。 - mbecker
侧边栏将是静态的（用于导航），内容列的高度将各不相同。这意味着它们中的每一个都可能是更长的列。 - mbecker
我已经使用了jQuery将高度设置为100%，但我更喜欢使用CSS解决方案：http://50.57.127.196/bootstrap/fluid.html （CSS语法不太好看，右侧的空白让我感到困扰） - mbecker
我在这里缺少什么？问题似乎完全有效。Bootstrap文档提供了.container或.container-fluid和.row或.row-fluid类，两者都似乎旨在包装一系列专门的固定或专门的流体列。 - Chris Burbridge
被接受的答案似乎是“流体 - 流体”。这里有一个实际上是“固定 - 流体”的答案：https://dev59.com/d2kw5IYBdhLWcg3wp8Sc#9739345 - Scott Stafford
2个回答
63

- 另一个更新 -

自 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类。在本例中，我们将其添加到第一个
元素中：
<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元素定位，需要在.fill中添加position: relative属性：
.fill { 
    min-height: 100%;
    position: relative;
}

最后，在HTML中添加.filler样式：

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。
12
我有点困惑，我以为你要的是固定-流体，而不是流体-流体？（我认为Bootstrap的例子是25％-75％） - Mike
我按照指示操作，它效果非常好！但是我试图改变侧边栏的颜色，但我无法弄清楚如何做。我尝试的每一种方法都会改变比我想要的更多的元素。是否有解决方法？ - Henrik O. Skogmo
4
我和 @mikemike 一样困惑：这个答案中链接到的两个工作示例似乎都是流体-流体，而不是固定-流体？ - Mason G. Zhwiti
5
是的，这两个例子都是流-流体系，而不是固-流体系。 - chuckles
请给这个答案点个踩。它是流体-流体的，而不是像要求的那样是固定-流体的。 - T3rm1
显示剩余7条评论
12

更新2018

Bootstrap 4

现在BS4是flexbox，定宽-流式布局(fixed-fluid)非常简单。只需设置固定列的宽度，并在流动列上使用.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

Bootstrap 3..

实现固定-流式布局的一种方法是使用媒体查询，与Bootstrap的断点对齐，这样你只需在较大的屏幕上使用固定宽度列，然后在较小的屏幕上让布局在响应式地堆叠...

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

Bootstrap 3固定宽度-流体布局演示

相关问答:
在bootstrap中使用容器-流体布局实现固定列宽
如何在Bootstrap 4中使左侧列固定，右侧可滚动且响应式？

这是完美的解决方案。在使浏览器非常小的同时，有没有防止列交换的方法？谢谢。 - Mark
只有当Content div“自然”小于（100％-300px）的宽度时才有效。在我的情况下，内容的“自然”大小大于该值，导致内容div到侧边栏结束后进入下一行。Bootstrap 3解决方案仍然有效，我只是使用了宽度而不是最小和最大宽度。 - Joshua Lee
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接