Twitter bootstrap 引导Gridview对齐混合

基于Bootstarp Gridview，列集合的总和必须等于12，以便正确对齐和显示

查看下面的代码，col-xs-6总计为18，但这显示了正确的对齐

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

.col-xs-6.col-md-4
.col-xs-6.col-md-4
.col-xs-6.col-md-4

我想有人给我解释一下

注：对我来说，这应该设置为：

 <div class="row">
  <div class="col-xs-4 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-4 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-4 col-md-4">.col-xs-6 .col-md-4</div>
</div>

.col-xs-6.col-md-4
.col-xs-6.col-md-4
.col-xs-6.col-md-4

通常的误解是列必须等于12。使用12个以上没有什么错，事实上引导文档的状态是：

如果一行中放置的列超过12列，则每组 额外的列将作为一个单元包装到新行“

文档中也有一些示例说明了为什么需要进行“列包装”：

---

。唯一不希望超过12个单位的时间是嵌套列时。

因为您的屏幕大小不在XS范围内，并且浏览器正在渲染“col-md-4”

---

它将在小于992px（宽度）的屏幕上换行

我关心的是，为什么在这种情况下，列不换行到col-xs-6，这会使最小（xs）屏幕上的最后一列换行到新行：