Bootstrap 网格示例

基本网格布局，帮助你熟悉 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-* 类，你可以轻松创建具有相等列的网格。

.row-cols-md-3 的 .col 子元素

三列不等宽

获得三列，从台式机开始，并扩展到大型台式机，宽度各不相同。记住，网格列在单个水平块中应该加起来等于十二。超过这个值，无论视口如何，列都将开始堆叠。

.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 v5 网格系统有六层类：xs（超小，此类前缀未使用）、sm（小）、md（中）、lg（大）、xl（超大）和 xxl（特大）。你可以使用这些类的几乎任何组合来创建更动态、更灵活的布局。

每一层的类都会向上扩展，这意味着如果你计划为 md、lg、xl 和 xxl 设置相同的宽度，你只需要指定 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

间距

使用 .gx-* 类可以调整水平间距。

具有 .gx-4 间距的 .col

使用 .gy-* 类控制垂直间距。

具有 .gy-4 间距的 .col

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

具有 .g-3 间距的 .col

容器

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

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid