Bootstrap 网格实例
下面我们收集了一些基本 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>
亲自试一试 »
没有装订线
.col-sm-4
.col-sm-8
使用 .row-no-gutters 类从行及其列中删除装订线:
实例
<div class="row row-no-gutters">
<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>
亲自试一试 »
具有嵌套列的两列
下面的示例显示了如何从平板电脑开始获取两列，并扩展到大型桌面，在较大的列中再添加两列（宽度相等）（在移动电话中，这些列及其嵌套列将堆叠）:
实例
<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 (台式机), and 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>
亲自试一试 »
提示: 记住一行的网格列加起来应该是 12。不仅如此，无论视口(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-4</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>
<!-- 仅为所需的视口添加 clearfix -->
<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">
</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>
亲自试一试 »
