今天完成的事情： 

1、完成了首页的footer页脚的制作。

在制作页脚的时候用栅格系统来做，但是发现了一个问题，按照ui效果图上的样式，底部有一块是空的，如图：

所以在用到栅格系统的时候，怎么能让它占到这一块呢？

我不清楚能用栅格来写一个没有内容的div吗，我不知道怎么撑开这个空白的div，后来想了下没有内容直接设置padding来撑是不是也可以，后面尝试了一下发现是可行的，觉得有点神奇。其实对于栅格我感觉我定义的还是太死了，这次是参考了下师兄的代码得出的结论，还是要有发散思维，这样得出来的结论不管又怎样的效果，也是在锻炼自己的一个思维方式。后面按照之前写主体的做法 ，分成4份，这一份单独只设置padding来写。这里其实可以不用设置4个col，设置一个最小的sm为12，和一个中等px的md为3就可以了。在这两个px值下显示的就会是一个或者4个。

2、学习了一个新的选择器。

学习了一个新的知识点，在做footer页脚的时候，写这个地方的时候如图：

设相同的类名就会都有影响，但是ui效果图上红框中这个是没有的，其实也可以换个类名解决，但是想了下，取类名真的很烦，然后了解到了一个选择器。

:nth-of-type() Selector

这样就可以不影响到另一个类名。

明天计划的事情： 

开始第二个页面职业推荐的编写。

遇到的问题：

1、

在768px值以上是正常的显示，但是在768px以下就变成如下图：

在这里我用了flex-flow：row warp这个属性也没有用，所以我的疑问是用媒体查询来写这个以下的页面显示会有效果吗，我该怎么去设置呢。

html代码：

我是分了两个ul无序列表来写的，本来想写在一个ul标签里，但是文字都记在一排了，看着很恶心，就分成了两个ul标签来写。

css代码：

这里只是用了flex来写的，再用padding值来撑开我想要的间距。在768px是以上看着到是正常，以下就爆了。。

 收获：

bootstarp栅格系统的用法是有很多种的，很灵活，关键看怎么去合理使用达到你想要的效果。