Bootstrap 4 网格 - .col-breakpoint 与 .col-number答案

【问题标题】：Bootstrap 4 grid - .col-breakpoint vs .col-numberBootstrap 4 网格 - .col-breakpoint 与 .col-number
【发布时间】：2019-10-02 11:39:27
【问题描述】：

我正在从 Bootstrap 3 迁移到 4，并试图了解网格方面的差异。

上面写着：

感谢 flexbox，没有指定宽度的网格列将自动布局为等宽列。例如，.col-sm 的四个实例将自动从小断点起 25% 宽。

列类表示在每行可能的 12 列中您希望使用的列数。所以，如果你想要三个等宽的列，你可以使用.col-4。

鉴于此，使用之间有什么区别：

这两个都将占据.row 的 25% 宽度。对吗？

那么指定它有什么区别呢？

在 Bootstrap 3 中，您必须使用 12 列网格中的特定数字，例如使用 4 个 .col-sm-3 实例意味着自 12/3 = 4 起您将拥有 4 个（25% 宽度）列

【问题讨论】：

【解决方案1】：

“鉴于此，使用以下有什么区别：”

.col-sm 的四个实例

.col-3 的四个实例

是的，在某些情况下它们看起来相同，但col-3 永远不会垂直堆叠，因为它适用于最小 (xs) 断点。但是，col-md 会在小于 768px 的中间断点处垂直堆叠。

在使用 4 列的用例之外，col-3 将始终为 25% 宽度。无论列数如何，col-md 都会同样增长。

【讨论】：

【解决方案2】：

在 Bootstrap 3 网格系统中，我们有 4 个断点

超小（适用于智能手机 .col-xs-*）

小（适用于平板电脑 .col-sm-*）

中（适用于笔记本电脑 .col-md-*）

大（适用于笔记本电脑/台式机 .col-lg-*）。

在 Bootstrap 4 中有一个新的 -xl- 大小。此外 -xs- 中缀已被删除，因此最小的列只是 col-1、col-2.. col-12 等。

col-* - 0 (xs)

col-sm-* - 576px

col-md-* - 768px

col-lg-* - 992px

col-xl-* - 1200 像素

【讨论】：