Bootstrap 4 网格 - 大尺寸

大尺寸网格示例

在上一个章节中，我们展示了一个具有针对小尺寸和大尺寸设备的网格示例。我们使用了两个 div（列），并在小尺寸设备上将它们设置为 25%/75% 的比例，在尺寸设备上设置为 50%/50% 的比例。

但在大尺寸设备上，33%/66% 的比例可能更好。

对于大尺寸设备，我们将使用 .col-lg-* 类。

现在 Bootstrap 会说：“在小尺寸上，查看带有 -sm- 的类并使用它们。在尺寸上，查看带有 -md- 的类并使用它们。在大尺寸上，查看带有 -lg- 字样的类并使用它们。”

以下示例将在小尺寸设备上实现 25%/75% 的比例，在中等尺寸设备上实现 50%/50% 的比例，在大尺寸和特大尺寸设备上实现 33%/66% 的比例。在特小尺寸设备上，它们将自动堆叠（100% 宽度）。

仅使用大尺寸

在下面的示例中，我们仅指定 .col-lg-6 类（不带 .col-md-* 和/或 .col-sm-*）。这意味着大尺寸和特大尺寸设备将是 50%/50% 的比例。但是，对于中、小和特小尺寸设备，它们将垂直堆叠（100% 宽度）。

自动布局列

在 Bootstrap 4 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-lg-* 中删除数字，并在指定的 col 元素数量上仅使用 .col-lg 类。Bootstrap 会识别有多少列，并且每列将获得相同的宽度。

如果屏幕尺寸小于 992 像素，列将水平堆叠。