如何使用Twitter Bootstrap v3.0构建两列流体布局 [英] How to build a two column fluid layout with Twitter Bootstrap v3.0

问题描述

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

Since bootstrap removed the *fluid css classes in v3.0, I couldn't find a way to build a two-column fluid layout. The goal is to achieve a layout similar to the Fluid Layout example in their old documantation: http://getbootstrap.com/2.3.2/scaffolding.html#layouts

推荐答案

Bootstrap 3中的网格现在是流畅的（ http://getbootstrap.com/getting-started/#migration-dropped）。您只需要使用 .row 和 .container ..

The grid in Bootstrap 3 is now fluid by default (http://getbootstrap.com/getting-started/#migration-dropped). You just need to use .row and .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

This however will not be 100% width. If you want 100% width you can do something like this.. http://www.bootply.com/86324

UPDATE： 3.0.1以后使用 container-fluid 全宽。

UPDATE: 3.0.1 and later use container-fluid for full width.

这篇关于如何使用Twitter Bootstrap v3.0构建两列流体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！