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

Ron*_*nyK 38 css3 responsive-design twitter-bootstrap twitter-bootstrap-3

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

Zim*_*Zim 75

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>
Run Code Online (Sandbox Code Playgroud)

然而,这不是100%宽度.如果你想要100%的宽度你可以做这样的事情.. http://www.bootply.com/86324

更新: 3.0.1及更高版本container-fluid用于全宽.

  • Bootstrap网格仅影响宽度.高度是另一个问题.你可以这样做:http://bootply.com/86329 (3认同)
  • 也许我没有使用正确的术语,我需要两列来填充页面的整个高度,即使它们的内容只占一部分.我清楚了吗? (2认同)