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（桌面）和 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>
亲自尝试 »
提示：请记住，一行中的网格列加起来应该等于十二。超过十二个，列会无论在什么视窗下都会堆叠。
混合：移动端、平板电脑和桌面端
示例
<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">
列 1
<br>
调整浏览器窗口大小以查看效果。
</div>
<div class="col-xs-6 col-sm-3">列 2</div>
<!-- 仅为所需视窗添加 clearfix -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">列 3</div>
<div class="col-xs-6 col-sm-3">列 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>
亲自尝试 »
