Bootstrap - 大型网格

Bootstrap 大型设备网格实例

在前一章中，我们介绍了一个网格示例，其中包含了中小型设备的类。我们使用了两个 div（列），我们在小型设备上给了它们 25%/75% 的拆分，在中型设备上给了它们 50%/50% 的拆分:

但在大型设备上，33%/66% 的拆分设计可能效果会更好。

提示: 大型设备被定义为屏幕宽度在 1200 px 及以上。

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

现在我们为大型设备添加列宽:

现在 Bootstrap 会说 "在小型设备，寻找包含 -sm- 的类并使用它们。在中型设备的情况下，看看里面有 -md- 的类并使用它们。在大型设备的情况下，看看里面有 -lg- 的类并使用它们"。

以下示例将导致在小型设备上拆分 25%/75%，在中型设备上拆分 50%/50%，在大型设备上拆分 33%/66%:

只使用大型类

在下面的示例中，我们只指定 .col-lg-6 类(不含 .col-md-* 或 .col-sm-*)。这意味着大型设备将分成50%/50%。但是，对于中小型设备，它将垂直堆叠（100%宽度）: