Bootstrap 网格 - 中等设备

Bootstrap 网格示例：中等设备

在上一个章节中，我们展示了一个带有小屏幕设备的网格示例。我们使用了两个 div（列），并将它们分成了 25%/75% 的比例。

但在中等屏幕设备上，设计可能最好是 50%/50% 的比例。

提示：中等设备定义为屏幕宽度在 992 像素到 1199 像素之间。

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

现在我们将添加中等设备的列宽

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

以下示例将在小尺寸设备上产生 25%/75% 的分割，在中等（及大尺寸）设备上产生 50%/50% 的分割。在超小尺寸设备上，它将自动堆叠（100%）

只使用中等屏幕

在下面的示例中，我们只指定了 .col-md-6 类（没有 .col-sm-*）。这意味着中等和大型设备将分割 50%/50% - 因为该类会向上扩展。但是，对于小尺寸设备，它将垂直堆叠（100% 宽度）

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