【问题标题】:How to build a two column fluid layout with Twitter Bootstrap v3.0如何使用 Twitter Bootstrap v3.0 构建两列流体布局
【发布时间】:2013-10-15 12:00:44
【问题描述】:

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

【问题讨论】:

    标签: css twitter-bootstrap responsive-design twitter-bootstrap-3


    【解决方案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
    猜你喜欢
    • 2012-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多