当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap前端框架，bootstrap为我们提供了4个对应不同尺寸屏幕的类，可以很方便的设计出自适应效果。
col-lg-* 一般用于大屏设备（min-width：1200px）
col-md-* 一般用于中屏设备（min-width：992px）
col-sm-* 一般用于小屏设备（min-width：768px）
col-xs-* 一般用于超小型设备（max-width：768px）
(*为1-12数字)
bootstrap中四个class如何使用？
一个栅格代表1，总共十二个。以上四个类分别表示当屏幕的宽度为多少时，触发相应的类。一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示，比如你有了12个section标签，你想让他们在不同屏幕大小的时候有不同的展示方式，大屏时一行显示6个，中屏时一行显示3个，小屏时一行展示2个，超小屏一行展示1个，你就可以在每一个section标签里面这样写
<div class='col-lg-2 col-md-4 col-sm-6 col-xs-12'></div>
分类目录