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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19249811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:39:00  来源:igfitidea点击:

How to build a two column fluid layout with Twitter Bootstrap v3.0

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

提问by RonyK

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

回答by Zim

The grid in Bootstrap 3 is now fluid by default (http://getbootstrap.com/getting-started/#migration-dropped). You just need to use .rowand .container..

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>

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

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

UPDATE:3.0.1 and later use container-fluidfor full width.

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