引导网格示例

基本的网格布局，让您熟悉 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的孩子 .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

天沟

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

.col带 .gx-4排水沟

使用.gy-*类来控制垂直排水沟。

.col带 .gy-4排水沟

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

.col带 .g-3排水沟

容器

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

。容器

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid