Bootstrap 网格示例
基础网格布局，让你熟悉在 Bootstrap 网格系统中进行构建。
在这些例子中 .themed-grid-col 类被添加到列中以添加一些主题。这不是 Bootstrap 默认提供的类。
五个网格层级
Bootstrap 网格系统有五个层级，每个层级对应我们支持的一类设备。每个层级从一个最小视口尺寸开始，自动应用于更大的设备，除非被覆盖。
.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4
三个等宽列
获取三个等宽的列 从台式机开始并扩展到大型台式机在移动设备、平板及以下设备上，列会自动堆叠。
.col-md-4
.col-md-4
.col-md-4
三个等宽列（另一种排列）
通过使用 .row-cols-* 使用这些类，你可以轻松创建具有相等列的网格。
.col ……的孩子 .row-cols-md-3.col ……的孩子 .row-cols-md-3.col ……的孩子 .row-cols-md-3三个不等宽列
获取三列 从台式机开始并扩展到大型台式机 各种宽度。记住，网格列的总和应为单个水平块的十二列。超过这个数，列就会开始叠加，无论视口大小如何。
.col-md-3
.col-md-6
.col-md-3
两列
获取两列 从台式机开始并扩展到大型台式机.
.col-md-8
.col-md-4
全宽单列
全宽元素不需要网格类。
两列，含两个嵌套列
根据文档，嵌套很简单——只需在现有列中放置一行列。这会给你两个列 从台式机开始并扩展到大型台式机，在较大的列中还有另外两个（等宽）。
在移动设备尺寸、平板及更小屏幕上，这些列及其嵌套列将会堆叠显示。
.col-md-8
.col-md-6
.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-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
混合：移动设备、平板和桌面
.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
槽宽
与 .gx-* 在类中，水平沟槽可以调整。
.col 与 .gx-4 槽宽.col 与 .gx-4 槽宽.col 与 .gx-4 槽宽.col 与 .gx-4 槽宽.col 与 .gx-4 槽宽.col 与 .gx-4 槽宽使用 .gy-* 用于控制垂直间距的类。
.col 与 .gy-4 槽宽.col 与 .gy-4 槽宽.col 与 .gy-4 槽宽.col 与 .gy-4 槽宽.col 与 .gy-4 槽宽.col 与 .gy-4 槽宽与 .g-* 在类中，两个方向的槽宽都可以调整。
.col 与 .g-3 槽宽.col 与 .g-3 槽宽.col 与 .g-3 槽宽.col 与 .g-3 槽宽.col 与 .g-3 槽宽.col 与 .g-3 槽宽容器
在 Bootstrap v4.4 中添加的额外类允许容器在特定断点之前保持 100% 的宽度。v5 添加了一个新的 xxl 断点。
.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid