bootstrap 栅格布局 浏览器窗口在768px和992px之间，为什么会执行会默认走.col-xs-6

Question

拿出官网的例子Bootstrap grid examples，我把浏览器窗口调整到768px到992px之间吗，第一行第一列因为有.col-sm-6，在768px到992px区间之间执行无可厚非，而第二列没有设置sm，为什么执行了.col-xs-6而不是.col-lg-4,背后是什么原理，感觉无规律可寻

Answer 1

看bootstrap的源码就明白了

.col-lg-4只在屏宽大于1200时，才会生效，因为包在了@media (min-width: 1200px) {...}里面。

而.col-xs-6则没有被任何media查询给包住。

所以，在这里的例子.col-xs-6，可以理解为是栅格系统的一种缺省写法。

Answer 2

的确如楼上所述，col-xs-6没有被media包裹其他三个都被media包裹着，一次列为什么会有效果是因为col-sm-6把col-xs-12的宽度覆盖了

翻看了下源码：

事实如此