Bootstrap 网格示例

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

三个等宽列

以下示例显示了如何获取三个等宽的列，从平板电脑开始，一直扩展到大型桌面。在手机上，这些列将自动堆叠。

三个不等宽的列

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

两个不等宽列

以下示例显示了如何获取两个不同宽度的列，从平板电脑开始，一直扩展到大型桌面。

无间隙

使用 .row-no-gutters 类来移除行及其列的间隙。

两个带两个嵌套列的列

以下示例显示了如何获取两个列，从平板电脑开始，一直扩展到大型桌面，并在较大的列内再包含两个列（在手机上，这些列及其嵌套列将堆叠）。

混合：手机和桌面

Bootstrap 网格系统有四类：xs (手机)、sm (平板电脑)、md (桌面) 和 lg (大型桌面)。这些类可以组合以创建更动态和灵活的布局。

提示：每个类都会向上扩展，因此如果您希望 xs 和 sm 的宽度相同，您只需指定 xs 即可。

混合：手机、平板电脑和桌面

清除浮动

在特定断点处清除浮动（使用 .clearfix 类），以防止内容不均匀时出现奇怪的换行。

偏移列

使用 .col-md-offset-* 类将列向右移动。这些类将列的左边距增加 * 列。

推送和拉取 - 更改列顺序

使用 .col-md-push-* 和 .col-md-pull-* 类更改网格列的顺序。