今日所做：

1.基本上完成了任务8的第一个页面，使用bootstrap进行布局，不过在过程中也发现了很多问题，积累了一些bootstrap

的使用经验，下面就对自己总结的经验进行一些归纳。

2.之前就一直存在的一个问题是，使用了bootstrap之后，当屏幕缩小，进行响应式布局的时候，自动跑到下一行的div会

跟下面的div发生重叠，相互覆盖，问了学姐之后，发现问题可能出在对contaner的使用上，我之前一直以为没另起一行都要再

新建一个container，后来发现其实只要用一个congtainer然后再在里面添加row就可以了，后来对布局进行修改之后，之前的

覆盖的问题就解决了，但是发现其他人有的也是用了很多的container，但是并没有发生覆盖，不知道我之前的到底是什么情况

3.学到了如何设置响应式布局，即xs、sm、md、lg分别对应一个断点，当页面宽度到达断点的时候，就会分别按照相应的布局

方式对现有的布局进行调整，因此每一行都应该设置xs、sm、md、lg，四个值，实现一个完成的响应式布局的过程。

4.在设置栅格中的几列col的宽度的时候，试图通过使用display：flex或给col宽度设置百分比的方式来改变布局，改变之后发现栅格就失去了

宽度变小，col自动换行的功能，而后得知栅格系统在布置一行中的col宽度的时候，是按照百分比布置的，因此col的宽度值是不可以设置百分比

值的。

5.在压缩宽度的时候，有一个div中的图片受到了压缩，不能完全显示，调试半天无果，后来发现是因为图片外面的父元素div已经设置了定高，

这样宽度压缩，高度右无法增加，只能通过挤压内部元素来尽量让全部元素摆放开来，把固定宽度取消，图片压缩问题得到了解决。

明日计划：

1.继续做任务8

遇到的问题：

1.使用栅格系统，缩小宽度，跳到下一行的div与下面的div发生重叠，后来请教师姐，较少container的使用，解决了这个问题

2.想要调整一下栅格中一行里div的布局，设置了div的宽度百分比值和display：flex，导致了栅格系统失去了响应式功能，后来

请教师姐，得知栅格系统不可以设置这两种东西，如果想要改变布局的话，可以通过在div里面再套一个div的方式来改变。

今日收获：

1.对使用栅格系统来布局有了更多的经验，能够设置响应式布局，也得知了一些限制性