css - 混合移动和桌面与网格系统

Question

Bootstrap 文档指出，对于单个水平 block ，网格列的总和应为 12。不仅如此，无论视口(viewport)如何，列都会开始堆叠。然后它继续给出一个混合移动和桌面的例子:

所以 .col-md-8 和 .col-md-4 加起来是 12，所以它们应该保持在一个水平 block 上。然而，.col-xs-12 和 .col-xs-6 加起来不等于 12。我在这里的假设是我们混合 xs 和 md 因为我们希望它们都出现在各自设备的单个水平 block 上。那么 .col-xs-12 和 .col-xs-6 不会叠加吗？如果不是，为什么？

Answer 1

xs-* 类针对 <768px 的设备，而 md-* 类针对 ≥992px 的设备。

因此，如果您使用的是手机 (<768px)，只需查看 xs 类并忽略 md 类。你将有 12 + 6，因为每行只有 12 列，你的 div 应该如下所示:

------------  <-- xs-12
------        <-- xs-6