美文网首页我爱编程
bootstrap之栅格系统理解

bootstrap之栅格系统理解

作者: IT飞牛 | 来源:发表于2018-03-20 22:55 被阅读0次

    优先级:
    col-xs-* < col-sm-* < col-md-* < col-lg-*
    我的理解:
    当两个class同时满足屏幕尺寸范围时,系统永远会优先调用优先级高的class

    首先上官方说明:


    image.png

    这张图很好说明了移动设备优先的原则,例如:

    <div class="col-xs-6 col-md-12 lg-red">内容块1</div>
    <div class="col-xs-6 col-md-12 lg-red">内容块2</div>
    

    当屏幕小于992,则col-xs-6生效,一行两列显示;
    当屏幕大于992,则col-md-12生效,两行一列显示;

    相关文章

      网友评论

        本文标题:bootstrap之栅格系统理解

        本文链接:https://www.haomeiwen.com/subject/fcviqftx.html