Twitter Bootstrap 3.0 - 嵌套之间的区别

Question

使用Bootstrap 3.0，有什么区别-

<div class="col-xs-12">
   <div class="col-xs-10"></div>
</div>

与

<div class="col-xs-10">
   <div class="col-xs-12"></div>
</div>

关于内部div是否有相同的width（包括margin和padding）？如果不是，有什么区别？有什么资源可以让我更好地理解这一点吗？

Answer 1

外部元素设置内部元素的约束尺寸，如果您简单地这样做，您可以看到这一点：

Demo Fiddle

HTML

<div class="col-xs-10">
    <div class="col-xs-12"></div>
</div>
<div class="col-xs-12">
    <div class="col-xs-10"></div>
</div>

CSS

div {
    height:20px;
}
.col-xs-12 {
    border:1px solid red;
}
.col-xs-10 {
    border:1px solid blue;
}

考虑到这一点，Bootstrap grid system 使用基于像素数量的媒体查询来以不同的间隔设置列的行为（例如 xs），因此，元素应该以 12 (最大数量），以便布局按预期响应屏幕尺寸。