今天完成的事情：

1.手写栅格布局。干掉了官网界面的所有bootstrap布局。

明天计划的事情：

1.把剩下界面的bootstrap都去掉，用css手写代替。

2.推进任务。

遇到的问题：

1.手写栅格布局，其中的一个好处就是可以自定义每列的宽度，可以定义出10个这种用bootstrap不太好写出的column。

.container {
width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

首先同样要创建一个总的容器，基本布局和bootstrap一样，

.container * {
  box-sizing: border-box;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

并同统一为border-box模型，方便计算。

另外由于浮动会脱离文档流，需要清除浮动的影响，

加入代码：

.row:before, .row:after {
  content: "";
  @include w-h(0, 0);
  display: block;
  clear: both;
}

不清除浮动会是这样：

清除之后：

定义出不同浏览器宽度变化下大容器container的最大宽度，主要是限定一个内容范围。

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

然后再用媒体查询写出不同浏览器宽度下col的占比，例如浏览器宽度小于992px时：

@media screen and (max-width: 992px) {
  .col-1 {
    width: 50%;
  }

  .col-2 {
    width: 50%;
  }

  .col-3 {
    width: 50%;
  }

  .col-4 {
    width: 50%;
  }

  .col-5 {
    width: 50%;
  }

  .col-6 {
    width: 50%;
  }

  .col-7 {
    width: 50%;
  }

  .col-8 {
    width: 50%;
  }

  .col-9 {
    width: 50%;
  }

  .col-10 {
    width: 50%;
  }

  .col-11 {
    width: 50%;
  }

  .col-12 {
    width: 50%;
  }
  .col-x {
    width: 20%;
  }
  .col-v {
    width: 50%;
  }
}

定义出所有的col宽度为50%，即变为两列宽度。其中col-x和col-v是我定义的5等分和2等分布局。其余浏览器宽度下定义宽度百分比类似。一个优点是只需要在class命名写一个col-，就可以随着浏览器宽度变化自动改变布局。bootstrap则需要写上col-，col-sm，col-md等等。不过感觉还是有点麻烦。

另外手写栅格布局后，原来一些参数将会失效，应该是和它用的浮动有关。

收获：

1.了解了手写栅格的用法。整个官网界面都不用bootstrap。不过感觉是有点麻烦，bootstrap感觉要方便很多。

2.手写栅格布局后，此处以及类似的地方justicy-content：space-between会失去效果

二维码的margin-left：auto失效。

原布局如下：

后面这些细节都修补了过来，是通过添加上下边距和右浮动改善。