Bootstrap 网格系统实例：中型和大型设备

在 实例：堆叠的水平 中，我们已经看过了基本的网格系统。在这里，我们使用 2 个 div，并在视口宽度的中间对它们进行 50%/50% 分割：

<div class="col-md-6">....</div>
<div class="col-md-6">....</div>

但是，在大型设备上，您最后设计成 33%/66%。所以我们要做的是准备好在断点处更改列的宽度：

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>

现在 Bootstrap 在中型设备中，会查找带有 md 的类，并使用它们。在大型设备中，会查找带有 lg 的类，并使用它们。在本实例中，我们的 2 个 div 将从 50%/50% 分割转变为 33%/66%。请查看下面的实例进行验证。（在这里，为每个列分别定义了样式，您可以避免这么做。）

结果如下所示：