Bootstrap - 中型网格

Bootstrap 中型设备网格实例

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

但在中型设备上 50%/50% 拆分的设计可能更好。

提示: 中等设备定义为屏幕宽度从 992 px 到 1199 px。

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

现在，我们将添加中型设备的列宽:

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

以下示例将导致小型设备上的拆分比例为 25%/75%，中型（和大型）设备上的拆分比例为 50%/50%。在超小型设备上，它会自动堆叠 100% :

只使用中型类

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

下一章将展示如何为大型设备添加不同的拆分百分比。