Bootstrap 网格示例

下面我们收集了一些基本 Bootstrap 网格布局的示例。

三等柱

.col-sm-4

以下示例演示如何获取从平板电脑开始并扩展到大型桌面的三个等宽列。在手机上，列会自动堆叠：

示例

亲自试一试 »

三个不等柱

.col-sm-3

.col-sm-6

.col-sm-3

以下示例展示了如何获取从平板电脑开始并扩展到大型桌面的三个不同宽度的列：

示例

亲自试一试 »

两个不相等的柱

.col-sm-4

.col-sm-8

以下示例展示了如何获取两个不同宽度的列（从平板电脑开始并扩展到大型桌面）：

示例

亲自试一试 »

无排水沟

.col-sm-4

.col-sm-8

使用.row-no-gutters类从行及其列中删除装订线：

示例

亲自试一试 »

两列和两个嵌套列

以下示例展示了如何从平板电脑开始获取两列并扩展到大型桌面，并在较大的列中添加另外两列（宽度相等）（在移动电话上，这些列及其嵌套列将堆叠）：

示例

亲自试一试 »

混合：移动和桌面

Bootstrap 网格系统有四个类别：xs（手机）、sm（平板电脑）、md（台式机）和 lg（大型台式机）。可以组合这些类来创建更加动态和灵活的布局。

提示：每个类都会按比例放大，因此如果您希望为 xs 和 sm 设置相同的宽度，则只需指定 xs 即可。

示例

亲自试一试 »

提示：请记住，一行的网格列总计应为 12 列。更重要的是，无论视口如何，列都会堆叠。

混合：移动设备、平板电脑和桌面设备

示例

亲自试一试 »

清除浮动

透明浮标（带有.clearfixclass) 在特定断点处，以防止内容不均匀的奇怪换行：

示例

<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>

<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-*类。这些类将列的左边距增加 * 列：

示例

亲自试一试 »

推拉 - 更改列顺序

更改网格列的顺序.col-md-push-*和.col-md-pull-*课程：

示例

亲自试一试 »