如何使用 Twitter Bootstrap v3.0 构建两列流体布局 [英] How to build a two column fluid layout with Twitter Bootstrap v3.0
问题描述
由于 bootstrap 在 v3.0 中删除了 *fluid css 类,我找不到构建两列流体布局的方法.目标是在他们的旧文档中实现类似于 Fluid Layout 示例的布局:http://getbootstrap.com/2.3.2/scaffolding.html#layouts
Bootstrap 3 中的网格现在默认是流动的 (http://getbootstrap.com/getting-started/#migration-dropped).你只需要使用 .row
和 .container
..
<div class="row"><div class="col-md-2">侧边栏内容<div class="col-md-10">正文内容
但这不会是 100% 的宽度.如果你想要 100% 的宽度,你可以做这样的事情.. http://www.bootply.com/86324一个>
更新: 3.0.1 及更高版本使用 container-fluid
全宽.
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
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>
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 and later use container-fluid
for full width.
这篇关于如何使用 Twitter Bootstrap v3.0 构建两列流体布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!