Bootstrap 4 网格示例

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

三个等宽列

使用 .col 类和指定数量的元素，Bootstrap 将会识别元素的数量（并创建等宽的列）。在下面的示例中，我们使用了三个 col 元素，每个元素占 33.33% 的宽度。

使用数字创建三个等宽列

您也可以使用数字来控制列的宽度。只要确保总和等于 12 或更少（不要求您使用全部 12 个可用列）

三个不等宽列

要创建不等宽的列，您必须使用数字。下面的示例将创建 25%/50%/25% 的分割

设置一个列的宽度

但是，仅设置一个列的宽度就足够了，其余的列将自动调整大小。下面的示例将创建 25%/50%/25% 的分割

更多等宽列

Row Cols

您还可以使用 `.row-cols-*` 类来控制每行应出现多少个列（无论有多少个 col），

更多不等宽列

等高

如果一个列比另一个列高（由于文本或 CSS 高度），其余的将跟随。

嵌套列

下面的示例显示了如何创建一个两列布局，其中一列内还包含另外两列。

响应式类

Bootstrap 4 网格系统有五个类

• .col- (超小设备 - 屏幕宽度小于 576px)
• .col-sm- (小设备 - 屏幕宽度等于或大于 576px)
• .col-md- (中型设备 - 屏幕宽度等于或大于 768px)
• .col-lg- (大型设备 - 屏幕宽度等于或大于 992px)
• .col-xl- (超大设备 - 屏幕宽度等于或大于 1200px)

以上类可以组合以创建更动态和灵活的布局。

提示: 每个类都会向上扩展，因此如果您希望为 sm 和 md 设置相同的宽度，您只需要指定 sm。

堆叠为水平

下面的示例显示了如何创建一个列布局，该布局在超小设备上是堆叠的，然后在较大设备（sm、md、lg 和 xl）上变为水平。

混合搭配

无边距

为 `.row` 容器添加 `.no-gutters` 类以移除边距（额外的空间）。