Bootstrap 4 网格 - .col-breakpoint 与 .col-number
Posted
技术标签:
【中文标题】Bootstrap 4 网格 - .col-breakpoint 与 .col-number【英文标题】：Bootstrap 4 grid - .col-breakpoint vs .col-number 【发布时间】：2019-10-02 11:39:27 【问题描述】：我正在从 Bootstrap 3 迁移到 4，并试图了解网格方面的差异。
https://getbootstrap.com/docs/4.0/layout/grid/
上面写着：
感谢 flexbox，没有指定宽度的网格列将自动布局为等宽列。例如，
.col-sm的四个实例将自动从小断点起 25% 宽。列类表示在每行可能的 12 列中您希望使用的列数。所以，如果你想要三个等宽的列，你可以使用
.col-4。
鉴于此，使用之间有什么区别：
.col-sm 的四个实例
.col-3 的四个实例
这两个都将占据.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 的中间断点处垂直堆叠。
https://www.codeply.com/go/xi74w61tdk
在使用 4 列的用例之外，col-3 将始终为 25% 宽度。无论列数如何，col-md 都会同样增长。
另见：What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
【讨论】：
【参考方案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 像素
【讨论】：
以上是关于Bootstrap 4 网格 - .col-breakpoint 与 .col-number的主要内容，如果未能解决你的问题，请参考以下文章
使用 flexbox 网格的 Bootstrap 4 砌体布局