col-,col-sm-,co-md-...

col-,col-sm-,co-md-...

老师,col的长度都是用百分比的,那为什么在响应不同屏幕尺寸,改变containner的width之后,不继续沿用col1~col12?反而要添加col-sm-,col-md-,col-lg-等等。只改变父容器containner不可以么?

正在回答 回答被采纳积分+1

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

2回答
好帮手慕码 2020-03-02 20:59:22

同学你好,不太懂同学怎么更改父级的宽度,因为父级宽度改变,col-等的占比是不会改变的。建议同学可以自己写一个演示代码,并在问答区进行提问测试,以便准确的帮助同学分析解决。

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

好帮手慕码 2020-03-02 18:24:12

同学你好,col1~col12是列的意思,不区分屏幕大小。根据就近原则,在查找不到其他屏幕宽设定的情况下,会按照col的布局去实现,一行12个。无论多大的屏幕,元素都是一行12个显示,但是这样是不友好的,如下:

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

所以添加了col-sm-,col-md-,col-lg-等,去适应不同的屏幕宽:

超小屏:

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

中屏:

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

只改变父容器containner是不可以的。

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

  • 提问者 Walker游游 #1
    老师,是我问题没有描述清楚么,我明白col是在分列,可是col-,col-sm-这些的样式的width不都是百分比么,那不是只更改父容器containner就可以了么?比如大屏lg,从手机屏xs的containner宽度变成大屏lg的containner宽度,还是分12列,只是原来一张图占12列,现在只占两列,那就把col-12变成col1就可以了,何必要再增加col-lg-?
    2020-03-02 19:16:38
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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