下面我们收集了基本的一些例子Bootstrap网格布局。
三等分列
.col-sm-4
.col-sm-4
.col-sm-4
下面的例子说明如何获取起始于平板电脑和扩展到大型台式机三个等宽列。 在手机上，列会自动叠加：
例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-4">.col-sm-4</div>
</div> 试一试» 三个不平等列
.col-sm-3
.col-sm-6
.col-sm-3
下面的例子说明如何获取起始于平板电脑和扩展到大型台式机三个不同的宽度列：
例
<div class="row">
<div
class="col-sm-3">.col-sm-3</div>
<div
class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-3">.col-sm-3</div>
</div> 试一试» 两个不相等的列
.col-sm-4
.col-sm-8
下面的示例演示了如何得到两个不同的宽度列起始于平板电脑和扩展到大型台式机：
例
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> 试一试» 两柱嵌套列
下面的例子说明如何得到两列起始于平板电脑和扩展到大型台式机，具有较大的列中的另一个两列（宽度相等）（在手机，这些列及其嵌套列将叠加）：
例
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div> 试一试» 混合型：移动和桌面
该Bootstrap网格系统有四种类型： xs （电话）， sm （片）， md （桌面）和lg （大桌面）。 这些类可以结合起来，创造出更多的活力和灵活的布局。
提示：每个类最高可扩展至，所以如果你想设置相同的宽度为xs和sm ，你只需要指定xs 。
例
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9
.col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3
.col-md-5</div>
</div>
<div class="row">
<div
class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div
class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div
class="row">
<div class="col-xs-6">.col-xs-6</div>
< div
class="col-xs-6">.col-xs-6</div>
</div> 试一试» 提示：请记住，网格列加起来应该有十二个一排。 更重要的是，列将堆叠无论viewport 。
混合型：手机，平板电脑和台式机
例
<div class="row">
<div class="col-xs-7 col-sm-6
col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5
col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>
<div
class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6
.col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4
col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div> 试一试» 清除浮动
清除花车（与.clearfix在特定的断点类），以防止不均匀的内容奇怪的包裹：
例
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser
window to see the effect.
</div>
<div class="col-xs-6
col-sm-3">Column 2</div>
<!-- Add clearfix for only the required
viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6
col-sm-3">Column 4</div>
</div> 试一试» 列偏移
使用移动到右侧列.col-md-offset-*类。 这些类增加一栏的左边空白处*列：
例
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5
.col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6
col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> 试一试» 推拉 - 更改列顺序
更改与网格列的顺序.col-md-push-*和.col-md-pull-*类：
例
<div class="row">
<div class="col-sm-4
col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8
col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div> 试一试»