今天完成的事情

task8-9bug修复

明天计划的事情

开始任务10

遇到的问题：

#导航栏菜单响应后未居中

解决方法：设置 justify-content: center;

#border白线

解决办法：删除空白行

#边框变形

解决办法：row嵌套出错，重新布局

#横向滚动条 ：

解决办法：友情链接宽度挤出，设置一行两个即可

#文本两端没有对齐

解决办法： text-align: justify;

#矩形未对齐

解决办法：row嵌套出错，重新布局

图片响应式

在Bootstrap中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

收获： 今天主要是修改布局上的各种问题，加深了对bootstrap的流式布局的理解

栅格化设计 栅格表如下：

bootstrap有一些基本原则：

.row必须包含在.container中 .col-xx-必须包含在.row中 内容应该包含于.col-xx-中 .col-xx-加和起来，一行为12，大于12时，会另起一行 通过设置col-xx-的padding值，可以修改格子之间的间隙 通过响应式设计，不同的分辨率下，格子大小会不一样，在大分辨率下.col-md-会被.col-lg-覆盖。 在各分辨率下container有最大值。 一行格式12个，但都设置了padding。

响应式设计 浏览器宽度小到一定程序时，col-xx-会不符合响应条件，从而占据100%宽度。

bootstrap还提供了导航条在小分辨率下优雅的展现方式，导航条会变成层叠式的一行，点击时，由javascript进行动态展开和收缩。

自适应图片缩放 在Bootstrap中，给图片添加.img-fluid样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。