Bootstrap-Grid system 网格系统1

1.row的bootstrap的程式码如下

.row {  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  margin-right: -15px;  margin-left: -15px;}

2.display: flex设为flex，flex-wrap: wrap为换行，且往下一行换，.row这一层margin左右-15px就是将宽度拉左右各拉长。

3.col-sm部分

{  position: relative;  width: 100%;  padding-right: 15px;  padding-left: 15px;}

4.上面宽度设100%(上面就是小于576px)，然后padding左右各为15px，position: relative没设定会在初始位置。

@media (min-width: 576px) {  .col-sm {    -ms-flex-preferred-size: 0;    flex-basis: 0;    -ms-flex-positive: 1;    flex-grow: 1;    max-width: 100%;  }

5.最小为576px(也就是大于576px)的最大宽度为100%，则-ms-flex-preferred-size、-ms-flex-positive: 1去google查不到？我大概在Chrome测试了一下，开启flex-basis: 0;会平均一块一块，但是不会向.row这一行的宽度平均分配宽度，在flex-grow: 1;则是开始平均分配.row的宽度了，另外只要没flex-basis: 0;则flex-grow: 1;也没有效用了就直接往往下一行换了，这两个就是这样去平均分配.row的宽度。

6.总结就是你到了小于576px之后每个col-sm都不会在容器上平均对齐，而是每个col-sm开始往下一行换了，
类似大于576px的float会置左，小于576px没设float而是往下一行换(如下图片)，大概就是flex-basis: 0;失效的原因，如有什么错误可以留言纠正交流，甘恩。

大于576px

小于576px

container

<div class="container">  <div class="row">    <div class="col-sm">      One of three columns    </div>    <div class="col-sm">      One of three columns    </div>    <div class="col-sm">      One of three columns    </div>  </div></div>

codepen
参考：六角学院Bootstrap