发表于: 2019-05-24 20:39:21

1 698


今天完成的事情 :任务8使用栅格系统写出来了一部分

遇到的问题:今天遇到的问题就是栅格系统怎么分份份多少份~!

<div class="col-lg-3 col-md-6 col-sm-12 grid">
   <div class="rocket">
       <img src="img/rocket.png" height="62" width="43"/>
       <h5 class="efficient">高效</h5>
       <div class="word">将5年到7年的成长时间,缩短到一年到三年</div>

   </div>

一开始是写错了写的是最大屏幕宽度的时候是

<div class="col-lg-12 col-md-6 col-sm-3 grid"> 这样写效果如下

 就是说默认为12 我给最大屏幕的时候给12 就是只显示一行 如果我想要最大屏幕的情况下是4个 就把col-lg-12换成col-lg-3就OK了这是正确的写法

上面这个col-lg的意思呢是网页在最大像素的时候是几个  col-md的时候是缩放到中等像素的时候是几个 小于768PX的时候呢就会显示这样子的 

col-sm-12 这个是最小像素小于576的时候显示12份也就是一整个这样子,大概的意思呢就是媒体查询小于 最小屏幕的尺寸显示多少个 小于最大的尺寸的时候显示多少个 在网页拉扯到中等的时候显示多少个如  最小屏幕的时候小于540@media (min-width: 540px)  

中等屏幕的时候小于768@media (min-width: 768px) 

最大屏幕的时候小于992@media (min-width: 992px)  

怎么去解决的:请教师兄

今天的收获:就如上面的图片所示 这是今天学习到的东西 栅格系统 不过也只是刚刚开始使用还是有很多不明白的地方只是自己没有发现 

明天计划学习什么: 明天继续写任务八以后的页面  顺便修改一下之前页头写的不太好修改一下吧



返回列表 返回列表
评论

    分享到