Bootstrap 5 网格 大屏幕

大屏幕网格示例

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

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

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

现在 Bootstrap 将会说“在小尺寸设备上，查看带有-sm-的类并使用它们。在中等尺寸设备上，查看带有-md-的类并使用它们。在大尺寸设备上，查看带有-lg-的类并使用它们。”

下面的示例将在小屏幕设备上产生25%/75%的分割，在中等屏幕设备上产生50%/50%的分割，在大、超大和XXL屏幕设备上产生33%/66%的分割。在超小屏幕设备上，它们将自动堆叠（100%）。

仅使用大尺寸

在下面的示例中，我们只指定了.col-lg-6类（不带.col-md-*和/或.col-sm-*）。这意味着大、超大和XXL屏幕设备将各占50%。然而，对于中、小和超小屏幕设备，它们将垂直堆叠（100%宽度）。

自动布局列

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

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