将Bootstrap栅格系统中某一列定宽会发生什么

大家都知道Bootstrap中的列会均分一行的宽度。

 <div class="container">
      <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4"></div>
            <div class="col-lg-4"></div>
      </div>
 </div>

效果如下图：

Paste_Image.png

如果container容器给定的宽度是600px，再给第一个col-lg-4的宽度大于200px,会发生什么呢?

Paste_Image.png

后面两个列会因宽度不够而被挤下去，这是因为Bootstrap的所有列采用浮动布局，如果某一列定宽而导致改行排列不下，后面的列便会被挤下去。
在此举一反三，研究一下Bootstrap的栅格布局原理

Paste_Image.png

在Bootstrap源码中，针对大屏设备1200px，container宽度设计为1170px是为了保证1200px宽的设备两边留白，使其不至于占满屏幕。
Bootstrap的栅格系统是一个三层结构，除了外围的container和内部的column，中间还有一个夹层row，并且Bootstrap要求所有的column必须包含在row里面，这是为什么呢？
Bootstrap将所有元素的盒模型设置为了border-box

.row {
  margin-right: -15px;
  margin-left: -15px;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

因此container宽度为1170px，减去左右共30px的padding，于是container的内容宽度就只剩1140px，这下所有col栅格的百分比乘的都是1140而不是1170，为解决此问题，Bootstrap在container中新增了一个夹层row，通过使用负的margin增加row的宽度至1170px。这里用到了盒模型尺寸的计算原理：块元素左右外边距、左右border、左右内边距和width这七个值之和必须等于包含块的content width。row的包含块container的content width为1140px，因此对于row而言，就存在如下等量关系：

-15px+0+0+width+0+0+（-15px）= 1140

于是row的width就自动扩展到1170px了。

这样是不是显得有点多此一举呢？既然container左右两边都有15px的外边距了，为什么还要设计15px的内边距？如果没有这个内边距，不就不需要额外添一个夹层row了吗？
这里就是Bootstrap设计的精巧之处：因为栅格之间需要间隔，因此每个column栅格都设置了15px的padding
这意味着每个column实际上也可以看成一个container！我们可以在任意一个column内再嵌套一个栅格系统，而无需再添加container，只需添加一个row即可，不要将row理解成“行”，它就是一个包含块而已。这样的三层结构使得Bootstrap成为了一个可以无限嵌套的响应式系统，每一个栅格都可以看做一个独立的系统，container只不过是那个最大的栅格而已。

另外，Bootstrap栅格系统预设的数值，如列数、槽宽以及媒体查询阈值都是可以修改的。可定制化是所有优秀框架的另一个共同品质。

列排序与列偏移

Bootstrap将所有列的position都设成了relative，就在于可对列进行定位或排序，比如要将某一个列定位到12分之3处（即从第三、四列交界处开始），可以设置left:25%或者right:75%。Bootstrap已经预设好了相应的类名：

 .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }

列偏移的不同之处在于使用margin，而被margin挤占的区域没办法安放其它的列。

 .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }