Bootstrap 网格(grid) 示例

基本网格布局，让您熟悉在 Bootstrap 网格系统中构建。

在这些示例中，将.themed-grid-col 类添加到列中以添加一些主题。默认情况下，这不是 Bootstrap 中可用的类。

五个网格层

Bootstrap 网格系统有五个层，每个层对应于我们支持的每个设备范围。每个层都从最小视口大小开始，除非被覆盖，否则会自动应用于较大的设备。

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

三列相等

获取三个等宽列，从桌面开始，扩展到大型桌面。在移动设备、平板电脑及更低版本上，列将自动堆叠。

.col-md-4

三列相等的替代方案

通过使用 .row-cols-* 类，您可以轻松地创建具有相等列的网格。

.col child of .row-cols-md-3

三列不相等

从桌面开始获取三列，然后扩展到各种宽度的大型桌面。请记住，单个水平块的网格列加起来最多应为 12 个。不仅如此，无论视口如何，列都会开始堆叠。

.col-md-3

.col-md-6

.col-md-3

两列

获取两列，从桌面开始，扩展到大型桌面。

.col-md-8

.col-md-4

全宽，单列

全角元素不需要网格类。

两列，包含两列嵌套列

根据文档，嵌套很容易 - 只需在现有列中放置一行列即可。这样一来，您可以从桌面开始两列，然后扩展到大型桌面，在较大的列中还有另外两列（宽度相等）。

在移动设备大小、平板电脑及更低尺寸下，这些列及其嵌套列将堆叠。

.col-md-8

.col-md-6

.col-md-4

混合：移动和桌面

Bootstrap v4 网格系统有五层类：xs（超小，不使用此类中缀）、sm（小）、md（中）、lg（大）和 xl（超大）。您可以使用这些类的几乎任意组合来创建更动态、更灵活的布局。

每一层类都会向上扩展，这意味着如果您计划为 md、lg 和 xl 设置相同的宽度，则只需指定 md。

.col-md-8

.col-6 .col-md-4

.col-6

混合：移动设备、平板电脑和台式机

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

槽（Gutters）

使用 .gx-* 类，可以调整水平槽。

.col with .gx-4 gutters

使用 .gy-* 类，可以控制垂直槽。

.col with .gy-4 gutters

使用 .g-* 类，可以调整两个方向的槽。

.col with .g-3 gutters

容器（Containers）

Bootstrap v4.4 中添加的其他类允许容器在特定断点之前保持 100% 宽。v5 添加了新的 XXL 断点。

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid