【发布时间】：2018-06-11 22:16:19
【问题描述】：
我对 css 不太擅长，并且难以理解 Bootstrap 3 的网格系统。
我查看了他们的源代码，似乎每个 col-* 类总是其父类宽度的 1/12。但如果是这样的话，这些列将永远不会堆叠。但他们确实如此。所以我一定是错的。有人可以向我解释一下堆叠是如何触发的吗？
xs、sm、md、lg这四种列的用途是什么？
谢谢。
【问题讨论】：
标签： twitter-bootstrap twitter-bootstrap-3
【发布时间】：2018-06-11 22:16:19
【问题描述】：
给你：
- Bootstrap 3 是“移动优先”，这意味着它主要用于手机，所有 div 都堆叠起来，因为这是制作移动设计的方法之一，它都是垂直的。
话虽如此，当然它用于更大的设备。因此，通过使用 col-sm-* 构建内容，您是在告诉它从“sm”宽度向上转换为网格，这恰好是当浏览器宽度为 786px 时。 md 和 lg 一样，只是变大了。
所以是的，网格中有 12 列。网格的整体宽度在断点处变大，这意味着 12 列的百分比相同，但像素更宽。这样您就可以调整和更改手机、平板电脑、台式机和大型台式机的设计。
列大小向下继承，这意味着如果您制作 col-sm-6，它在 md 和 lg 处也是 6 列，您不必设置全部三个。但是，如果您希望它在小型时为 6，而在中型时为 5，您可以使用 col-sm-6 和 col-md-5
- 4 种尺寸的目的是让您可以根据需要更改和优化多个屏幕宽度的布局。大多数时候，人们只想要 col-sm-*，因为它在移动设备上是移动的，但在其他所有东西上都是正常的网格布局。
我会阅读这 2 篇文章以了解更多信息 http://www.helloerik.com/bootstrap-3-grid-introduction http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
【讨论】：
xs - 超小屏幕尺寸sm - 小屏幕尺寸（移动）md - 中尺寸屏幕（平板电脑等）lg - 大尺寸台式机/笔记本电脑
如果一行中有三个col-md-4（中型屏幕中的列），则网页的（3 列）结构不会改变，除非浏览器尺寸低于中型屏幕，即sm， xs。希望你能得到这个。
【讨论】：
-
谢谢。我想我现在明白了。如果我使用 lg 大小的列，那么只要屏幕宽度超过 1200 像素，这些列就会是 .container 大小的 1/12。一旦低于 1200，每列将是 100% 宽，因此列将堆叠在另一列之下。
-
不！，仅当您使用
col-lg-1或col-md-1或col-sm-1或col-xs-1时，它将是容器的 1/12。更多帮助here -
是的，我的意思是 col-lg-1。
Bootstrap 3 网格有 4 种尺寸（或“断点”）。 Tiny（适用于智能手机 .col-xs-）、Small（适用于平板电脑 .col-sm-）、Medium（适用于笔记本电脑 .col-md-）和 Large（适用于笔记本电脑/台式机 .col-lg-）。 3 种网格大小使您能够控制不同设备上的网格行为。
例如，
col-sm-3 在典型的小设备宽度（超过 768 像素）上是 3 个网格列宽 (25%)
col-md-3 在典型的中等设备宽度（超过 992 像素）上是 3 个网格列宽 (25%)
等等。
sm、md 和 lg 网格将全部垂直“堆叠”在小于 768 像素的屏幕/视口上。这是 xs 网格适合的地方。使用 col-xs-* 类的列不会垂直堆叠，并会在最小的屏幕上继续按比例缩小。
使用此demo 调整浏览器大小，您将看到网格缩放效果。
另外，我写了一篇关于how the Bootstrap grid works的更深入的文章。
【讨论】：