完成的事情：

制作好了首页内容的上半部分，主要使用bootstrap 4的网格系统，bootstrap 4使用flex布局，网格系统是响应式的，列会根据屏幕大小自动重新排列。flexbox的一大优势是，没有指定宽度的网格列将自动设置为等宽与登高列。

首先是给父元素class="contaner" 设置固定宽度，这样就会自动的设置外边距和内边距。

给容器设置的属性还有container-fluid 给容器设置全屏宽度。

网格系统是使用行来创建水平的列组，内容需要放置在列中，并且只有列可以是行的直接子节点，预定义的类如row何col-sm-4可以用于快速制作网格布局，但是有些属性并不能满足我们的要求，可以重新引入样式表来进行覆盖修改。

列通过填充创建列内容之间的间隙，这个间隙是通过row类上的负边距设置第一列和最后一列的偏移。

明天计划的事情：

完成首页和战略企业合作页面。

遇到的困难：

使用<div class="container">

       <div class="row">

       </div>

       </div> 当给里面的子元素设置了背景色时，第一列和最后一列就会和没有设置背景色的元素在视觉上不对齐。

因为row 里面的子元素设置了左右内边距15px，导致设置背景色的元素看起了不对齐，给子元素设置左右margin撑出15px空白可以在使上下子元素看起来整齐一致。

收获：

学会了使用bootstrap来创建等宽响应式列：

如果有四个子元素，每个元素设置col-sm-3，在576px及以上的屏幕时是四列等宽的元素块，当设备屏幕小于576px时，四个列将会上下堆叠排版。

不同屏幕宽度等宽、不等宽响应式列：

在有两个子元素时，第一个子元素设置col-sm-3 co-md-6 在576px及以上时占据屏幕左侧25%宽度， 768px及以上时占据屏幕左侧50%。 小于576px时占据一行的全部宽度。

第一个子元素设置col-sm-9 co-md-6 在576px及以上时占据屏幕右侧75%宽度， 768px及以上时占据屏幕右侧侧50%。 小于576px时占据一行的全部宽度。