【发布时间】：2015-07-14 10:07:29
【问题描述】：
Bootstrap 文档指出，单个水平块的网格列最多应为 12 个。不仅如此，无论视口如何，列都会开始堆叠。然后继续举一个混合移动和桌面的例子：
所以 .col-md-8 和 .col-md-4 加起来是 12，所以它们应该保持在一个水平块上。但是，.col-xs-12 和 .col-xs-6 加起来不等于 12。我在这里的假设是我们混合 xs 和 md，因为我们希望它们都出现在各自设备的单个水平块上。那么 .col-xs-12 和 .col-xs-6 不会堆叠吗？如果不是，为什么？
【问题讨论】：
-
是的，它们将堆叠在移动设备上 - .col-xs-12 的宽度为 100%，而 .col-xs-6 的宽度为容器的 50%
-
@JamesKing 那么我不明白他们在这个例子中完成了什么。 .col-md-8 和 .col-md-4 将出现在桌面屏幕的一个块上，而 .col-xs-12 和 .col-xs-6 将出现在手机上的两个块上，这是由于堆叠造成的。因此，它们在这两种设计上看起来并不相同。这里的目的不是让它们在移动设备和桌面设备上显示相同吗？
-
我认为他们试图说明如何通过根据屏幕大小改变列数来完成不同的布局。如果您阅读示例中的代码 cmets，您可以看到这一点 getbootstrap.com/css/#grid
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
标签： css twitter-bootstrap