创建栅格布局的方法

1.The container

栅格需要一个容器，容器的宽度一般是100%，为了两边留白和整体居中，可以给容器一个max-width，当小于这个宽度时，就会变成100%宽度。

.container{
  width: 100%;
  max-width: 1100px;
}

2.The row

需要一个行元素来容纳列元素，以免影响下一行元素，我们一般使用clearfix来清除浮动，撑开父容器。

.clearfix:before,
.clearfix:after{
  display: table;
  content: '';
  clear: both;
}

3.The column

需要将栅格的每一列放在同一行里，通常可以使用float,inline-block,table,flex来达到我们的目的，但是在使用float时，要注意如果元素的内容为空，浮动元素将会在一行的顶部，我们可以给列元素1px的min-height

[class*='col-']{
  float: left;
  min-height: 1px;
}

4.The column width

每一列的宽度，可以通过百分比来划分容器的宽度，通过sass的for循环可以很容易的做到这一点。

for $i from 1 through 12{
  col-md-#{$i}{
    width: percentage($i / 12);
  }
}

5.The column padding

在有box-sizing属性之前，想要给一个百分比宽度的元素一个静态的外边距是一件头疼的问题，而现在只要设置border-box,为元素设定的宽度和高度决定元素的边框盒。

[class*='col-']{
  box-sizing: border-box;
  padding: 10px;
}

6.The response

为了支持响应式布局，所以我们要使用媒体查询，来改变列元素的宽度，可以在视口大小小于800px时，将较大的列元素宽度设置为100%，以更好的视觉体验。

 @media all and (max-width:800px){
        .col-1{ width: 33.33%;    }
        .col-2{ width: 50%;        }
        .col-3{ width: 83.33%;    }
        .col-4{ width: 100%;    }
        .col-5{ width: 100%;    }
        .col-6{ width: 100%;      }

        .row .col-2:last-of-type{
            width: 100%; 
        }

        .row .col-5 ~ .col-1{
            width: 100%; 
        }
    }

这里设置列2和列1是为了当它们位于一行的最后一列时会被挂断，因此将它们设置为了100%宽度。