我看了本节视频,还是不太理解为什么试用栅格系统可以删除col-12 只剩下col-md-4

我看了本节视频,还是不太理解为什么试用栅格系统可以删除col-12 只剩下col-md-4

17:42的时候老师在解释,可是我没听懂

我只知道跟width:100%有关系,具体什么情况没想明白

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,对于你的问题解答如下:

  1. 老师这里举例说的是,如果一个元素设置col-md-4类名,在超小屏上(宽度小于576),不满足min-width大于等于576,所以设置的类col-md-4样式不会生效。由于元素默认宽度是百分百,所以即使不写col-12, 实际展示的效果,也就是相当于超小屏col-12和小屏col-sm-12设置的样式width:100%。而在大屏和超大屏时,满足条件min-width大于576, 所以col-md-4设置的样式会生效。

  2. 老师这里只说了,在超小屏下不用进行断点判断。

    因为在超小屏下,屏幕宽度小于576,如下图所示,不满足后面的@media条件,所以可以不用做断点判断,默认就会使用前面设置的col-1 col-2等样式

    http://img1.sycdn.imooc.com//climg/5e60b8930962000c14621316.jpg

  3. 不是很清楚同学这句话“两个都写才能够小屏以及超小屏的时候占据12份,中屏及中屏以上是占4份”表达的什么意思。

    如果想要在小屏以及超小屏占据12份,在中屏及中屏以上占4份,可以省略col-12和col-sm-12(因为块元素默认宽度是百分百), 只写col-md-4就实现效果的。示例:

    http://img1.sycdn.imooc.com//climg/5e60bcb309049d3613580546.jpg

    测试结果如下:

    超小屏, 默认宽度百分百显示

    http://img1.sycdn.imooc.com//climg/5e60bcd909dd930e13760788.jpg

    小屏下,默认百分百显示

    http://img1.sycdn.imooc.com//climg/5e60bd270905cbd316260894.jpg

    中屏下,使用col-md-4样式,占四份

    http://img1.sycdn.imooc.com//climg/5e60bd8409b78e3a19780780.jpg

    大屏下,屏幕宽度大于992, 满足min-width大于768条件,col-md-4设置的样式同样生效

    http://img1.sycdn.imooc.com//climg/5e60bdcb0902670625400824.jpg

    超大屏下,屏幕宽度大于1200, 满足min-width大于768条件,col-md-4设置的样式同样生效

    http://img1.sycdn.imooc.com//climg/5e60be13093abf1530560712.jpg

同学可以下载源码,结合示例测试理解下。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕慕子 2020-03-05 15:27:29

同学你好, 老师这里的意思是元素默认宽度是百分百填充满父元素的,所以可以删除.col-12这个类设置的width:100%样式,这样在超小屏幕下,让元素使用默认样式填充满父级元素就可以了。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 迷失的小麦 #1
    还是不太理解,col-md-4这句话的意思是中屏及中屏以上是占4份,因为使用的是min-width所以大屏,超大屏不用写。可是为什么不写col-12依然可以小屏以及超小屏的时候占据12份,为什么说小屏以及超小屏可以不用在断点进行判断? (两个都写才能够小屏以及超小屏的时候占据12份,中屏及中屏以上是占4份) (不太理解这里的意思)
    2020-03-05 15:54:47
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师