如何使用 Twitter Bootstrap v3.0 构建两列流体布局

Posted 2023-03-06

【中文标题】如何使用 Twitter Bootstrap v3.0 构建两列流体布局

【英文标题】：How to build a two column fluid layout with Twitter Bootstrap v3.0

【发布时间】：2013-10-15 12:00:44

【问题描述】：

由于 bootstrap 在 v3.0 中删除了 *fluid css 类，我找不到构建两列流体布局的方法。目标是在他们的旧文档中实现类似于流体布局示例的布局： http://getbootstrap.com/2.3.2/scaffolding.html#layouts

【参考方案1】：

默认情况下，Bootstrap 3 中的网格现在是流动的 (http://getbootstrap.com/getting-started/#migration-dropped)。你只需要使用.row 和.container..

<div class="container">
    <div class="row">
        <div class="col-md-2">
            Sidebar content
        </div>
        <div class="col-md-10">
            Body content
        </div>
    </div>
</div>

但这不会是 100% 宽度。如果你想要 100% 的宽度，你可以这样做.. http://www.bootply.com/86324

更新： 3.0.1 及更高版本使用container-fluid 全宽。

【讨论】：

也许我没有使用正确的术语，我需要两列来填满页面的整个高度，即使它们的内容只占了一部分。我说清楚了吗？

Bootstrap 网格只影响宽度。身高是另一个问题。你可以这样做：bootply.com/86329