今天完成的事情，今天写完首页。

<div class=" col-xl-3 col-md-6 col-sm-12">
    <div class="d-f-j-s-a-c">
        <div class="roundness">1</div>
        <div class="learning-method"><span>匹配你现在的个人情况，寻找适合自己的岗位</span></div>
        <img height="30" src="img-website/left-triangle.png" width="32"/>
    </div>
</div>

遇到的问题，抄得栅格系统没办法分配空间，也不知道是什么情况。最后问了一下师兄，师兄带着我挨个扒源码，总算是把问题找出来了。源码没有超全。

框架里面自带的col属性里面自带15px的边距，在使用栅格系统的时候就会存在，空间分配不够得情况，也不知道是怎么回事，任务8的时候就是这样，那个时候觉得框架不好用。

.col{

1. flex-basis: 0;
2.  padding-left：15px，
3. padding-right：15px，
4. -ms-flex-positive: 1;
5.  flex-grow: 1;
6.  max-width: 100%;

}

<div class="card col-lg-3 col-md-6 col-sm-12">
    <div class="character-card">
        <img height="108" src="img-8/task-8-17.png" width="108"/>
        <h5 class="counselor">技术顾问：罗大佑</h5>
        <p>百度技术总监：互联网基础服务领域，从事虚拟主机，云服务器，域名。
            曾任新网高级技术经理，负责技术研发，团队管理与建设
        </p>
    </div>
</div>

遇到问题，栅格系统空间的分配。

把要分配的内容分配为4份，发现空间不足。但是把框架里要抄的15px去掉就没有问题。

设置边框，超过1px，col空间就会存在不够分配的问题，耐下性子好好琢磨了一下，误打误撞的发现了，如果在col下面，在写一个div包裹住内容，就没有问题了。栅格系统中的col是负责分配栅格空间的，无论空间被切成4份还是6份，col可以看成一容器，可能导致col没有多余空间了，我们写一个父级div。

col没有设置任何属性，就等于说使用容器里面的空间。

之前师兄说得要给col下面写一个父级，不知道为什么要这样写，到现在终于明白了。

收获，任务14 15重写任务89.之前bootstrap4上面很多不明白的地方，懂了，之前抱怨框架不好用，发现还是自己不会用。

明天计划，把任务14，15 ，做完准备进入js，抽出时间看一下，js知识资料与less。